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: sass/node-sass#215

[dlmanning]

86827e6 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 👍

[dlmanning]

6b65a31 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 notifications@github.com 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//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 webdesserts@gmail.com wrote:

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

On Sunday, January 19, 2014, Jonathan Kemp <notifications@github.com<javascript:_e({}, 'cvml', 'notifications@github.com');>>
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//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 notifications@github.com 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//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 notifications@github.com 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//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//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.

[browsermage]

@webdesserts thanks for this 👍

[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 ...
#1 (comment)

[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！>_<

[danyliuk-o]

how to solve this problem in vs code ?

[felipe-pita]

@starfish7 Did you tried this? #1 (comment)

[danyliuk-o]

@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..)

[xxx-nn]

`Error in plugin "gulp-sass"
Message:

gulp-sass 5 does not have a default Sass compiler; please set one yourself.
Both the sass and node-sass packages are permitted.
For example, in your gulpfile:

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

[16:22:12] The following tasks did not complete: sassHandler
[16:22:12] Did you forget to signal async completion?`

hi~ How to solve this problem？