I recently made the switch from using less to sass in my project. I went ahead and installed gulp-sass using npm and updated my gulpfile to compile sass instead of less. However, despite making these changes, gulp is not compiling my .scss file to css. I've tried researching and troubleshooting with no luck so far. Here are all the details I can provide:
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}