Gulp-Sass Fails to Compile SCSS File

Gulp-sass fails to compile scss file

Keep your imports as is, just pass the includePaths option in your gulp sass module as an argument:

gulp.src('./_/sass/style.scss')
        .pipe(sass({ includePaths : ['_/sass/'] }))
        .pipe(gulp.dest('./'));

...should do it for you.

As per https://github.com/dlmanning/gulp-sass/issues/1

gulp-sass not compiling sass files

Thanks to SteveLacy i could manage to fix this.

If you only have .sass files, and no .scss, you need to use gulp-ruby-sass instead of gulp-compass or gulp-sass. Here is a sample of my working code :

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

gulp.task('compile-sass', function() {
    gulp.src(path/to/your/sass/folder/main.sass")
        .pipe(sass())
    .pipe(gulp.dest('path/to/your/css/folder));
});

gulp-sass fails to compile using @import full directories with underscore name files

After scratching me head for a while I found this:

https://www.npmjs.com/package/gulp-sass-glob

gulp.task('sass', function() {    return gulp.src('./source/css/pattern-global.scss')        .pipe(sourcemaps.init())        .pipe(sassGlob()) //this was what I was missing        .pipe(sass({includePaths: ['./source/_patterns/']}).on('error', sass.logError))        .pipe(sourcemaps.write())        .pipe(gulp.dest('./source/css/patterns/'));});

Gulp - not compile all Sass files and stops on Sass error

You need two tasks to build scss and to watch files.

Build scss:

gulp.task('style:build', function () {
    gulp.src(path.src.style)
        .pipe(sass({errLogToConsole: true}))
        .pipe(cssmin())
        .pipe(gulp.dest(path.build.css));
});

String you need - {errLogToConsole: true} - show errors to console instead finishing work.

Watch task:

gulp.task('watch', function () {
    watch([path.watch.style], function (event, cb) {
        gulp.start('style:build');
    });
});

Where path.watch.style is 'src/style/**/*.scss' - you need to write here the path to your source folder.

Watch task doesn't have any dependencies, so remove [ 'bootstrap-sass', 'global-sass', 'copy-boostrap-js' ].

---

P.S. Remove gulp.watch( 'dev/sass/bootstrap.scss', [ 'bootstrap-sass' ] );. You have not to change anything at framework files. It's bad practice.

To customize bootstrap blocks you can override bootstrap variables (if you want all buttons have font-weight: bold; you should override $btn-font-weight variable).

So, first import file with default variables. Then import file with your own variables. Finally import blocks you really need, for example navbar or greed.

You main scss file may look like:

@import "../bootstrap/scss/variables.scss"; 
@import "variables.scss"; // Put your custom variables in here 

@import "../bootstrap/scss/mixins.scss";

// Add navbar and greed from bootstrap
@import "../bootstrap/scss/navbar.scss"; 
@import "../bootstrap/scss/grid.scss";

// Add custom files here
@import 'custom.scss';
@import 'header.scss';

Main file sample found in Joseph Fitzsimmons article.

---

Related Topics