CODEWITHSUNDEEP
sassgulpgulp-sass
Wordpressor
Wordpressor

Reputation: 7543

Gulp-sass flow (importing and mixins)

I've been using Prepros lately which performs some magic automatically, decided to move to Gulp and I'm in trouble, I guess.

I have multpiple scss files such as:

mixins.scss (here I store all the mixins) variables.scss (variables here) colors.scss (and colors) base.scss (base styles for my app) app.scss (here I import mixins, variables, colors and base - in that order)

Now, with Prepros it used to work like this - first all the files were imported to app.scss, then beautiful app.css file was generated, easy and painless.

Gulp, I assume, tries to compile every single one of these files separately and fails at base.scss, because I use mixins/variables/colors there and Gulp is unaware of these.

How can I fix that? I was thinking maybe watching app.scss alone would fix the problem, but then app.scss wouldn't even know if there were any changes to variables.scss for example.

My default Gulp task looks like this:

// default task for "gulp"
gulp.task('default', ['sass'], function() {
    gulp.watch('./assets/scss/*.scss', function() {
        gulp.run('sass');
    });
});

Any hints?

Upvotes: 0

Views: 1163

Answers (1)

avcajaraville
avcajaraville

Reputation: 9084

Are you 100% sure all your partials files (mixins, variables, etc) are properly named ?

This is, they start with an underscore, ie: _variables.scss, _mixins.scss, etc.

This seems the issue for you, is not a gulp problem, but a sass one.

This way you tell sass compiler that those files should not be compiled.

From sass docs:

The underscore lets Sass know that the file is only a partial file and that it should not be generated into a CSS file. Sass partials are used with the @import directive.

Upvotes: 2

Related Questions