sass file not compiled by gulp

Question

I want to switch from less to sass so I installed gulp-sass with npm and modified my gulpfile to compile sass instead of less (nothing else changed). Sadly gulp doesn't compile my .scss file to css and after googling and trying all i could think of it still doesn't compile. Here are all the informations I can show you:

gulpfile.js

// GULP CONFIG

// REQUIRES
    // general
    var gulp = require('gulp');
    // css
    var sass = require('gulp-sass');
    var minifycss = require('gulp-minify-css');
    var autoprefixer = require('gulp-autoprefixer');
    var rename = require("gulp-rename");
    // watch
    var watch = require('gulp-watch');


// TASKS
    // css 
    gulp.task('css', function() {
            gulp.src('style.css')                                       // get the 'all-import' css-file
            // .pipe(sass({includePaths: ['./styles']}))
            // .pipe(sass().on('error', sass.logError))                 
            .pipe(sass())                                               // sass to css
            .pipe(autoprefixer('last 2 version', { cascade: false }))   // autoprefix
            .pipe(minifycss())                                          // minify
            .pipe(rename('style.min.css'))                              // rename to style.min.css
            .pipe(gulp.dest(''));                                       // output to root
    });

    // watch
    gulp.task('watch', function() {
      gulp.watch('styles/*', ['css']); 
    });


// RUN DEFAULT
gulp.task('default', ['watch']);

related Folders & Files

├── style.min.css
├── style.css (with @import styles/style.scss)
│    └── styles
│          ├── style.scss

terminal response:

starting gulp:

[10:19:14] Starting 'watch'...
[10:19:14] Finished 'watch' after 11 ms
[10:19:14] Starting 'default'...
[10:19:14] Finished 'default' after 20 μs

after saving style.scss

[10:19:20] Starting 'css'...
[10:19:20] Finished 'css' after 15 ms

style.scss (content on purpose of testing obviously)

$color: #99cc00;

body {
  background-color: $color;
  .sub {
    color: $color;
  }
}

style.min.css after running through gulp

$color:#9c0;body{background-color:$color;.sub{color:$color}

avcajaraville avcajaraville · Accepted Answer · 2015-06-17T08:45:34

You are not telling gulp to watch for sass file. On this line:

gulp.src('style.css')

You are specifying a css file, not a scss file. Change it to :

gulp.src('style.scss') // update, s missing

Also, there is no output route specified. This line:

.pipe(gulp.dest(''));

Should contain your destiny route, and its currently empty.

So, for the root route, something like this should work:

.pipe(gulp.dest('./')); // or whatever route you want

Anyway, your file structure is a bit weird.

In my opinion, you should create different folders for sass files and compiled ones.

Hope this puts you on the right track.

sass file not compiled by gulp

1 Answers