Using with gulp

[goldsteinr]

Getting error when trying to use with gulp. This is my task:

var gulp = require('gulp');
var postcss = require('gulp-postcss');
var watch = require('gulp-watch');
var sass = require('gulp-sass');
var cssnano = require('cssnano');
var rename = require("gulp-rename");
var autoprefixer = require('autoprefixer');
var shopifySettings = require('postcss-shopify-settings-variables');
gulp.task('css', function () {
  var processors = [
    autoprefixer,
    cssnano,
    shopifySettings
  ];
  return gulp.src('stylesheets/*.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(postcss(processors))
    .pipe(rename({ suffix: '.min.css', extname: '.liquid' }))
    .pipe(gulp.dest('./assets'));
});

gulp.task('watch', function() {
    gulp.watch('stylesheets/**/*.scss', ['css']);
});

Error:

Message:
    stylesheets\main.scss
Error: error reading values after
        on line 2 of stdin
>>      color: $(color-text);
   -------^

[11:56:33] Finished 'css' after 26 ms

[bit3725]

I suggest add postcss-shopify-settings-variables at the beginning of processors and try again. change var processors to

var processors = [
    shopifySettings,
    autoprefixer,
    cssnano,
  ];

[goldsteinr]

Same errors. It happens when i try to compile the scss. Without compiling, it works.

[bit3725]

try to remove this line

.pipe(sass().on('error', sass.logError))

shopify will compile sass/scss files for you, you don't need compile it with gulp by yourself.

[goldsteinr]

Im using @imports. Shopify dont understand those... I need to compile before sending it to the assets folder. No?

2016-01-22 0:08 GMT-02:00 xingkui wang notifications@github.com:

try to remove this line

.pipe(sass().on('error', sass.logError))

shopify will compile sass/scss files for you, you don't need compile it with gulp by yourself.

— Reply to this email directly or view it on GitHub https://github.com/bit3725/postcss-shopify-settings-variables/issues/1#issuecomment-173777741 .

Ricardo Goldstein Telefone: (21) 99711-9221 Email: goldstein.ricardo@gmail.com

[bit3725]

that's the painpoint when use sass/scss in shopify. if the main reason use @import is combining multiple css files to single one for shopify, what i did was used plugin like gulp-concat-css to combine them firstly, then use postcss to compile for shopify.

[goldsteinr]

the problem is in the autoprefixer and css nano..

[goldsteinr]

its possible to use shopify-settings with {% if %} and {% else %}?

[bit3725]

i don't think use if and else in css is a good practise, i will use them in js or liquid files to load different class name instead.

[goldsteinr]

good point. Thanks! :+1: