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

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

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

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…

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

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.

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.

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?

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

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.

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

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.