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 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/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 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/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 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/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 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/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:

app
  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 notifications@github.com 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.

[runbiscuit]

@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?

[runbiscuit]

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!