gulp-sass doesn't seem to play nice with sass imports

[webdesserts]

Right now if any of my sass files have an @import in them I get an error like this:

stream.js:94
      throw er; // Unhandled stream error in pipe.
            ^
source string:1: error: file to import not found or unreadable: 'normalize'

Where normalize is a normalize.scss in the same directory.

This seems to be because you are using the data option without an includePaths.

This could maybe be solved with an includePaths option?

gulp.src('./styles/main.scss')
  .pipe(sass({includePaths: ['./styles']}))
  .pipe(gulp.dest('./styles'))

[webdesserts]

Haha! Went to browse the code to see if I could add it in and saw that you take in an options param. The example I gave works as expected >_<. If I get the time I'll make a pull request for documentation.

Edit: _NEVERMIND_ it's in the documentation. I just needed some sleep...

[dlmanning]

Awesome! I should update the docs. Thanks :)

[jonkemp]

I ran into this same problem. The above fixed it, but I don't see anything in the documentation.

[dlmanning]

It's the very last line of the README.md, but I'll make it more explicit.

[jonkemp]

I realize now that it's in the documentation for node-sass.

[sturobson]

I guess for some clarity I've raised an issue on node-sass about it not 'adhering to spec' as sass-lang states that _partials.scss should not get compiled.

link: https://github.com/andrew/node-sass/issues/215

[dlmanning]

86827e6eca8f9532b4c97a5d6d963b55ae460923 should take care of this for you.

[sturobson]

@dlmanning yes, @neilkinnish ping'd me that earlier today.
Now I feel it's a question of node-sass not adhering to the spec in sass-lang that should be fixed. So added a comment in here to create some continuity of conversation and so forth.

Thanks for the gulp version :+1:

[dlmanning]

6b65a312f44f076c6f92ed3e35c20848bd9cdf6a adds extended documentation for imports and partials.

[marcamos]

Would anyone mind assisting me with an issue very much related to this? I wasn't sure if I should comment here, or open a new issue…

I'm trying Gulp for the first time and I'm hitting a brick wall with the Sass task; it won't handle my imports, even though I've used the includePaths option as pointed out above (see the attached image below).

Perhaps I'm overlooking something simple? Any tips?

Left: gulp sass command leads to an error. Right: directory structure, gulpfile, primary Sass file, imported Sass file.

[jonkemp]

I had the same problem. The includePaths has to be a separate directory for some reason.

[webdesserts]

I don't have mine as a seperate directory and it works for me

On Sunday, January 19, 2014, Jonathan Kemp [email protected] wrote:

I had the same problem. The includePaths has to be a separate directory
for some reason.

—
Reply to this email directly or view it on GitHubhttps://github.com/dlmanning/gulp-sass/issues/1#issuecomment-32729769
.

[webdesserts]

https://github.com/webdesserts/webdesserts-www/blob/master/Gulpfile.js

You can find my gulpfile there as an example. I didn't know about the
underscore naming scheme then.

On Sunday, January 19, 2014, Michael Mullins [email protected] wrote:

I don't have mine as a seperate directory and it works for me

On Sunday, January 19, 2014, Jonathan Kemp <[email protected] wrote:

I had the same problem. The includePaths has to be a separate directory
for some reason.

—
Reply to this email directly or view it on GitHubhttps://github.com/dlmanning/gulp-sass/issues/1#issuecomment-32729769
.

[marcamos]

Small update:

Thinking that, perhaps, the generally acceptable partial name shortening might be the problem, I swapped this

@import "normalize"
@import "custom"

…to this…

@import "_normalize.sass"
@import "_custom.sass"

…and got a different error:

Marcs-MacBook-Pro:gulp marcamos$ gulp sass
[gulp] Using file /Users/marcamos/Sites/_tests/gulp/gulpfile.js
[gulp] Working directory changed to /Users/marcamos/Sites/_tests/gulp
[gulp] Running 'sass'...
[gulp] Finished 'sass' in 3.65 ms
[gulp] [gulp-sass] source string:1: error: top-level @import directive must be terminated by ';'

However, I can't put a semicolon at the end of the @import directive. This is Sass, not Scss.

[webdesserts]

Gulp-sass uses node-sass and in-turn lib-sass

https://github.com/andrew/node-sass/blob/master/README.md

I believe lib-sass does not support the sass syntax, only scss.

If you want to to use the sass syntax, your best bet is to use a node
child-process and use sass from the command line like grunt does.

On Sunday, January 19, 2014, Marc Amos [email protected] wrote:

Small update:

Thinking that, perhaps, the generally acceptable partial name shortening
might be the problem, I swapped this

@import "normalize"@import "custom"

…to this…

@import "_normalize.sass"@import "_custom.sass"

…and got a different error:

Marcs-MacBook-Pro:gulp marcamos$ gulp sass
[gulp] Using file /Users/marcamos/Sites/_tests/gulp/gulpfile.js
[gulp] Working directory changed to /Users/marcamos/Sites/_tests/gulp
[gulp] Running 'sass'...
[gulp] Finished 'sass' in 3.65 ms
[gulp] [gulp-sass] source string:1: error: top-level @import directive must be terminated by ';'

However, I can't put a semicolon at the end of the @importhttps://github.com/importdirective. This is Sass, not Scss.

—
Reply to this email directly or view it on GitHubhttps://github.com/dlmanning/gulp-sass/issues/1#issuecomment-32731483
.

[neilkinnish]

Yeah it's using libsass which only supports the .scss flavour of sass.

Also you don't need to prefix with _ when you import it will find them based on name, that just tells sass not to compile on its own and treat as a partial

[marcamos]

Thanks for the replies, folks. Any tips on getting Gulp to compile the older Sass syntax? I'm not sure I have the technical chops to use a node child-process, as @webdesserts points out.

Or, I suppose I might try the gulp-ruby-sass plugin, that's probably what I'm looking for…

[dlmanning]

marcamos: https://npmjs.org/package/gulp-ruby-sass is probably your best bet if you need to use the older sass syntax. My understanding is that libsass is never going to support it.

[marcamos]

Thanks @dlmanning. Yeah, I just came to that conclusion a moment before your reply. Thanks to all of you for the information!

[webdesserts]

I haven't tried it, but the gulp-ruby-sass plugin is probably your best
bet. creating a node-process would just be reinventing that wheel. And
sindre is a good developer, so i'm sure it's well made. Just note that if
your sharing the project across environments, you'll need to
ensure both ruby and ruby-sass are on each environment (as is the case with
the grunt equivalents).

On Monday, January 20, 2014, Marc Amos [email protected] wrote:

Thanks for the replies, folks. Any tips on getting Gulp to compile the
older Sass syntax? I'm not sure I have the technical chops to use a node
child-process, as @webdesserts https://github.com/webdesserts points outhttps://github.com/dlmanning/gulp-sass/issues/1#issuecomment-32731740
.

Or, I suppose I might try the gulp-ruby-sass pluginhttps://npmjs.org/package/gulp-ruby-sass,
that's probably what I'm looking for…

—
Reply to this email directly or view it on GitHubhttps://github.com/dlmanning/gulp-sass/issues/1#issuecomment-32788232
.

[quagliero]

_Edit: FIXED, NOT A GULP-SASS ISSUE. Turns out libsass doesn't like the dot in the inuit.css directory name (plus another error within inuit but I submitted a PR to them for that)_

---

Has anyone had any success with nested @imports? In this instance I'm using the inuit.css framework, where my master style.scss file imports inuit (which is in its own directory, with its own sub directories), and then my own styles, with their own sub directories. Something like:

style.scss
inuit.css (folder)
__ _inuit.scss
__ inuit sub dirs
ui
__ patterns
____ _modules.scss
__ objects
__ sections

Here's what I have:

gulp.task('sass', function() {
    gulp.src('./public/css/style.scss')
        .pipe(sass({ includePaths: ['./public/css'], errLogToConsole: true }))
        .pipe(gulp.dest('./public/css'));
});

But it errors the first time my own styles reference anything from inuit. Any ideas?

[jonhurrell]

@quagliero Can you post your solution, I’m having similar trouble compiling an inuit project.

[quagliero]

@jonhurrell In the end I got it working using that same snippet of code above. I had to make two changes on inuit though: one of them was changing the 'inuit.css' directory to be 'inuitcss', and the other you can see here (just escaping some variables properly)

In the end due to the current issues with node-sass/libsass not handling @extends probably (ticket), I had to revert to gulp-ruby-sass anyway!

What errors are you getting?

[jonhurrell]

No errors, I’ve replicated your directory structure, but the style.css doesn‘t contain any of the imports from inuit.css (despite) removing the '.' from the directory name. Only 'ui' partials and vars make the compile.

[jonhurrell]

@quagliero Switched to gulp-ruby-sass, straight compile after resolving interpolation issue.

[quagliero]

@jonhurrell I've just changed it back to node-sass to sanity check for myself! It still works. The only thing that caught me out this time was I'd forgotten to rename the inuit import @import "inuitcss/inuit";. That'd make sense why it wasn't importing anything from inuit, although probably would have littered your terminal with errors.

Glad you're up and running with gulp-ruby-sass, I'm not really noticing much in the way of a speed issue with it.

[dlmanning]

Have you guys filed issues with libsass about this '.' directory name problem? It's got nothing to do with gulp-sass itself.

[quagliero]

@dlmanning Apologies for the thread hijacking, I realised it was a libsass compilation issue when my site looked b0rked (or maybe that was just my CSS...). I've raised an issue with them :)

Edit: I've updated my first comment to reflect this.

[dlmanning]

No worries! I just wanted to make sure the issues actually get reported in a place where someone can fix them. :)

[quagliero]

To bring this thing full circle: The dot in the filename has been fixed on libsass Master, just waiting for it to filter down! https://github.com/hcatlin/libsass/issues/280 :+1:

[rafaelrinaldi]

I'm not sure if this is the right place to ask for help, but here it is. My folder structure looks like this:

  assets
    stylesheets
      application.scss
vendor
  assets
    bower
      normalize-css
        normalize.css
    stylesheets

So what I'm trying to do is to compile everything into a single application.css file. I'm importing all the stuff within my manifest file and everything seem to be compiled properly unless the stuff that are not relative to it such as normalize.
Here is how my manifest file looks like:

@import "../../../vendor/assets/bower/normalize-css/normalize.css";

@import "helpers/mixins";

@import "base/base";

@import "core/core";
@import "core/fixed";
@import "core/application";
@import "core/navigation";

As you can see the first import that I do is to the normalize file which lives under vendor/assets/bower.
On the compiled file normalize is not being added and the import remains there. No errors are thrown.

Here is my Gulp task:

gulp.task('sass', function() {
  var config = {
    sass: {
      includePaths: ['vendor/assets/bower']
    },
    autoprefixer: {
      cascade: true
    }
  };

  if(/prod/.test(env)) {
    config.sass.outputStyle = 'compressed';
  }

  gulp.src('./app/assets/stylesheets/application.scss')
      .pipe(sass(config.sass))
      .pipe(sass({includePaths: ['./vendor/bower'], errLogToConsole: true}))
      .pipe(autoprefixer(config.autoprefixer))
      .pipe(gulp.dest(paths.output))
      .pipe(connect.reload());
});

I think I'm missing some configuration option here, any ideas?

Ps.: I know the folder structure looks a bit silly but unfortunatelly it's not an option to change it.

[quagliero]

@rafaelrinaldi I'm pretty sure you can't @import .css files in Sass, they must have the .scss extension (even if they're just regular CSS).

There is a normalize.scss version if you bower search for it.

Edit: Also, you're already passing through vendor/assets/bower path as part of the gulp sass config. So you shouldn't need to do ../../../vendor/.., you should just be able to include like @import normalize.scss/normalize as it already knows where to look.

From the docs: _includePaths is an Array of path Strings to look for any @imported files._

[rafaelrinaldi]

@quagliero Whoa, you're right! I didn't knew that. I've always @import .css files and didn't had an issue to this day. Probably because I've been using Sass with Rails and Sprockets/Asset Pipeline handle that under the hood.

Thanks man!

[mhulse]

@quagliero Whoa, you're right! I didn't knew that. I've always @import .css files and didn't had an issue to this day. Probably because I've been using Sass with Rails and Sprockets/Asset Pipeline handle that under the hood.

Just FYI for future readers: Using symlinks works for this as well. This has worked for me:

$ cd your/scss/folder/
$ ln -s ../plugins/normalize-css/normalize.css _normalize.scss

Now, need to figure out why I'm getting "File to import not found or unreadable". :smile:

[vdecree]

I'm getting this issue on windows 8.1 and the suggested fix doesn't seem to help. My task:

gulp.task('sass', function() {
    gulp.src('assets/scss/**/*.scss')
        .pipe(sass({style: 'expanded', includePaths: [ './assets/scss/partials', './assets/scss/modules', './assets/scss/helpers' ], errLogToConsole: true }))
        .pipe(autoprefixer('last 2 version'))
        .pipe(rename(pkg.name + '.css'))
        .pipe(gulp.dest('assets/css'))
        .pipe(reload({stream: true}))
        .pipe(notify({message: 'SCSS processed!'}));
});

The error I get at random intervals is:
file to import not found or unreadable: partials/header

[quagliero]

@vdecree If you're including ./assets/scss/partials as an includePath, then you probably don't need to @import partials/header, it just needs to be @import header. This is just a blind guess without context of course :smile:

[Keats]

Hello,

Try the next version of gulp-sass using

npm install dlmanning/gulp-sass#2.x

[vdecree]

@quagliero I thought you'd saved my day then! Turns I didn't know I could then remove the path prefix from the actual style.scss despite that being fairly obvious. It did make it happen less often but I've noticed it's still happening.

@Keats Will give that a go sir

[vdecree]

@Keats I found I had to roll back as lots of my plugins such as breakpoints and modular scale stopped working. I need to strip things back and see if I can find a setup that works or go back to grunt!

[Keats]

That's odd, the libsass version used in the 2.x branch should be much more feature-complete than the current one.
It might be worth making sure it's actually using libsass 3.2 and if it is and those plugins are not working open issues on them

[vdecree]

@Keats Will do - shall load it up in a moment and have another try. Would rather stay on gulp if I can - the speed is insanely good.

[Snugug]

Check out the libsass issue queue. They did a lot of refactoring and, while all of their tests passed, some things that worked but didn't have tests blew up. The modular scale issue, for instance, has a fix in place and is awaiting a new release (parsing @elseif as an at rule instead of as @else if)

On Apr 13, 2015, at 6:26 AM, Mat Doidge [email protected] wrote:

@Keats Will do - shall load it up in a moment and have another try. Would rather stay on gulp if I can - the speed is insanely good.

—
Reply to this email directly or view it on GitHub.

[vdecree]

@Snugug Spot on buddie. I managed to change that myself and seems to be completing OK. I will see if this gets over the partials issue.

[vdecree]

I've found in the short time I've been running 2.x that the same issue occurs but the behavior is slightly different. Instead of simply being able to hit save again to trigger a successful process of the SCSS, it instead stops the task and comes out of watch, meaning I have to type gulp again to re-initiate the task. It's happening less often, but nonetheless still an issue and more of annoying one now

[guilima]

I am facing the same problem. I did extended tests with no results or significant glitch display. Tried to work with the gulp-ruby-sass but is 3 times slower to process the task.

@vdecree you are not alone buddy, gulp-sass#2.x didn't help.

[vdecree]

@guilima Glad I'm not alone! I'm still trying to figure out a fix. Moved back to Grunt in the meantime to avoid having to re-run the task constantly after it cuts out.

[theroyalstudent]

@vdecree @guilima Having this issue, know of any fix?

[15:26:18] Using gulpfile ~/Desktop/DigitalOcean/:var:www/staging/gulpfile.js
[15:26:18] Starting 'sass'...

events.js:85
      throw er; // Unhandled 'error' event
            ^
Error: resources/admin/style.sass
  4:9  file to import not found or unreadable: reset
Current dir: 
    at options.error (/Users/student/Desktop/DigitalOcean/:var:www/staging/node_modules/gulp-sass/node_modules/node-sass/lib/index.js:276:32)

[Keats]

@theroyalstudent can you provide the smallest example where it fails?

[theroyalstudent]

It just fails when it runs into this:

@import 'reset'
@import 'base'
@import '../materialDesign/materialize'
@import '../bourbon/app/assets/stylesheets/bourbon'
@import '../miscDesign/animate'

reset and base are SASS, and everything else are SCSS.

[smnarnold]

I have the exact same issue, juste like @theroyalstudent, @vdecree and @guilima.
I'm going nuts!

[anttoon]

+1

[adamschoenemann]

I am also having this issue! (Windows 7)

[felipe-pita]

+1

[Snugug]

Please read and try out Common Issues and Their Fixes. Everyone who has had this issue has had it resolved following those steps.

[adamschoenemann]

Right! Shame on me for not checking that out first. It does indeed appear to fix the problem (so far). Thank you!

[smnarnold]

My problem was caused by a combination of Sublime Text and a slow hard drive.
We were able to solved it by changing the setting atomic_save to true.
Preferences > Settings - User > "atomic_save": true

[lachieh]

Changing the atomic_save option to true also solved this issue for me also (Windows 8.1). A more permanent fix for this would be to make gulp-sass wait for the file to be available and set the default timeout to a few hundred milliseconds.

[clintongreen]

@marcamos I ran into the same problem, I also had sass files and couldn't find gulp support for them. Luckily its only the import function that Gulp seems to have a problem with, so to solve it only change your sass file that imports the other files to scss. It can still import sass files into the scss file no problem. I hope this helps. Cheers

[TNT-Likely]

@Snugug thanks,

[8bitPancakes]

@webdesserts thanks for this :+1:

[braintapper]

@arnolali thanks, that fixed my problem on Windows

[marcospgp]

@arnolali your solution fixed the issue here as well! <3

[FFirmenich]

@arnolali Thanks! Fixed my problem on Windows 10

[vitorspencer]

By the way, I'm not Mac (so, not Windows) and the only thing that fixed my problem here was to also set atomic_save to true on my SublimeText user settings.

[Chenzo]

I'd just like to also send my thanks to @arnolali too... I was suffering for a while, but that has fixed it for me (windows 10/sublime)

[chekit]

My thanks to you @arnolali I had the same issue with my gulp-sass task on saving, but your suggestion has solved the issue (windows 10/sublime text 3)

[valentincostam]

@arnolali Thanks!

[shreeshkatyayan]

Hey guys, in my base .scss file, I am importing the following modules in order of precedence to override the default behaviors.

@import "fonts.scss";
@import "reset.scss";
@import "_vendor.scss";
@import "master.scss";
@import "layout.scss";
@import "header.scss";
@import "input.scss";
@import "md-toast.scss";
@import '../login/_login.scss';
@import "../srp/_srp.scss";
@import '../directives/_directives.scss';
@import "utils.scss";
@import "_helper.scss";

But the css generated from my gulp process is not in the mentioned import order. Am I missing something?

Here is my gulp process -

'use strict';

var gulp = require('gulp');
var sass = require('gulp-sass');
var gutil = require('gulp-util');
var size = require('gulp-size');
var rename = require('gulp-rename');

module.exports = {
    doSass: function(){
        gulp.src('./src/sass/app.scss')
                .pipe(sass({outputStyle: 'compressed'}).on('error', gutil.log))
                .pipe(rename('app-rm-md.min.css'))
                .pipe(size({
                    title: "app-rm-md.min.css",
                }))
                .pipe(size({
                    title: "app-rm-md.min.css",
                    gzip: true
                }))
                .pipe(gulp.dest('./dist/css'));      
    },
    watchSass: function(){
        return gulp.watch('./src/**/*.scss', ['sass']);
    }
};

What could be the possible fix, other than adding another CSS class?

[xzyfer]

@shreeshkatyayan there were issues with ordering in old versions. Please update.

[shreeshkatyayan]

@xzyfer I am presently using v2.3.1..

[minhuang0]

I will still be a problem after I add the includePathsparameter . Could you help me look at this problem? Thanks !

gulpfile.js:

gulp.task('styles', function() {
    return gulp.src('src/sass/main.scss')
        .pipe(sass({includePaths : ['src/sass']}))
        .pipe(gulp.dest('dist/css'));
});
gulp.task('watch', function() {
    gulp.watch('src/sass/**/*.scss', ['styles']);
});

src/sass/main.scss:

@import "framework";

when i change src/sass/framework.scss file ，This error often occurs

error:

throw er; // Unhandled 'error' event
      ^
Error: src\sass\main.scss
Error: File to import not found or unreadable: framework
        Parent style sheet: C:/workspace/xcj/translate_react/src/sass/main.scss
        on line 2 of src/sass/main.scss
>> @import "framework";

package.json

"devDependencies": {
    "gulp": "^3.9.1",
    "gulp-autoprefixer": "^3.1.1",
    "gulp-clean": "^0.3.2",
    "gulp-compass": "^2.1.0",
    "gulp-concat": "^2.6.0",
    "gulp-connect": "^5.0.0",
    "gulp-imagemin": "^3.0.3",
    "gulp-jshint": "^2.0.1",
    "gulp-minify-css": "^1.2.4",
    "gulp-rename": "^1.2.2",
    "gulp-sass": "^2.3.2",
    "gulp-uglify": "^2.0.0",
    "jshint": "^2.9.3"
  }

node-version : v5.10.1
npm-version: 3.8.3
computer system: windows 7 64
shell: powershell

[felipe-pita]

@minhuang0 did you tried this?

[minhuang0]

@arnolali @felipedefarias thanks, that fixed my problem !

[Shaker-Hamdi]

O.K, this was driving me crazy, but I think I figured it out.
Although @arnolali fix did if for me, but it won't work for other editors, so for me the problem was in the Hard drive.

I'm using an SSD for the operating system, but all my files including my projects are in in a separate Mechanical Drive, and I suspected because Lib-Sass is so fast that it's (for some reason) compiles the file faster than the save process is complete on files that's being imported, that's why it cant' see the @import "example" and throw this error. (or something like that, I'm just thinking out lout here)

Anyway, I moved my project to the desktop (on the SSD), and it worked like a charm (even without doing the "atomic_save" trick on sublime, and I tested it thoroughly.

I thought I would mention this solution in case someone was using another editor and has the same (SSD, HDD) situation.

[yantakus]

I have a similar problem. My config doesn't throw any errors. All the sass code in my file is compiled, but import statements are just ignored. Here is my config:

var gulp = require('gulp');
var sass = require('gulp-sass');
var sourcemaps = require('gulp-sourcemaps');

gulp.task('styles', function() {
  return gulp.src('./app/frontend/styles/all.scss')
    .pipe(sourcemaps.init())
    .pipe(sass({includePaths: ['./app/frontend/styles']}).on('error', sass.logError))
    .pipe(sourcemaps.write('./maps'))
    .pipe(gulp.dest('./app/assets/stylesheets/bundles'));
});

gulp.task('default', function() {
  gulp.watch('./app/frontend/styles/**/*.scss', ['styles']);
});

What can be the problem? Doesn't seem this is the same problem everybody has here.

[shobhitsharma]

When importing in SASS modules, make sure your files have _ in front, i.e. when you have initialized@import 'module/something', your directory must be having module/_something.scss not module/something.scss. If this is correct, then there must be issue the way you have declared styles.

[xiaofuyesnew]

@Shaker-Hamdi Great idea! Basicly the right cause.

So we can slow down the complie speed and code gulpfile like this:

gulp.task('sass:dev', () => {
    return setTimeout(() => {
        return gulp.src('./sassPath/*.scss')
        .pipe(sass())
        .pipe(gulp.dest('./distPath/css'))
        .pipe(reload({ stream: true }))   //if you use browser-sync
    }, 500)
})

It works fine for me!
Hope it could be helpful.

[mohdule]

@xiaofuyesnew Works for me 2, Thanks

[riptid3]

@xiaofuyesnew Thank you very much, i think same way but dont know how to put SetTimeout function in task right, had to write return ))) All works fine, you help me to overcome so big problem.

[mittalyashu]

events.js:160
      throw er; // Unhandled 'error' event
      ^
Error: _sass\style.sass
Error: File to import not found or unreadable: footer.sass.
       Parent style sheet: C:/Users/YASHU/Desktop/website/_sass/style.sass
        on line 9 of _sass/style.sass
>> @import "footer.sass";
   ^

    at options.error (C:\Users\YASHU\Desktop\website\node_modules\node-sass\lib\index.js:291:26)

Getting the same error. Tried everything.

[Shaker-Hamdi]

@mittalyashu Did you try this ...
https://github.com/dlmanning/gulp-sass/issues/1#issuecomment-247866836

[mittalyashu]

@Shaker-Hamdi You mean to say that it does take the time to fetch the files from the hard drive before compiling it.

[Shaker-Hamdi]

@mittalyashu something like that, I'm just guessing. The only thing that worked for me was moving all my projects to the SSD.

[tatwd]

The sass task only compiles the main sass file which imports other modules, and the watch task watches all sass files of your project.For example:

scss/main.scss

@import "base";
...

scss/_base.scss

// some styles

Then,you can modify your gulpfile.js like this:

...
gulp.task('sass', function() {
    return gulp.src('scss/main.scss')  // only compiles main.scss
        .pipe(sass())
        .pipe(gulp.dest('dist/css'));
});
...
gulp.task('watch:sass', function() {
    gulp.watch('scss/*.scss', ['sass']); // watching all .scss files
});
...

May you success！>_<

[starfish7]

how to solve this problem in vs code ?

[felipe-pita]

@starfish7 Did you tried this? https://github.com/dlmanning/gulp-sass/issues/1#issuecomment-278237590

[starfish7]

@felipe-pita , yes, but the same problem (
this is my sass part

gulp.task("styles", function() {
return setTimeout(() => {
return gulp
.src("app/" + syntax + "/common." + syntax)
.pipe(
sass({ outputStyle: "expanded" }).on(
"error",
notify.onError({
message: "<%= error.message %>",
title: "Sass Error!",
sound: "Pop"
})
)
)
.pipe(rename({ suffix: ".min", prefix: "" }))
.pipe(autoprefixer(["last 15 versions", "> 0.1%"], { cascade: true }))
.pipe(cleancss({ level: { 1: { specialComments: 0 } } }))
.pipe(gulp.dest("app/css"))
.pipe(browserSync.stream())
}, 500);
});

[felipe-pita]

I think you should try to update node-sass or use https://www.npmjs.com/package/gulp-wait to insert a delay before run .pipe(sass..)