Gulp plugin for sass
Sass plugin for gulp.
npm install gulp-sass
Something like this:
var gulp = require'gulp';var sass = require'gulp-sass';gulptask'sass'gulpsrc'./scss/*.scss'pipesasspipegulpdest'./css';;
Options passed as a hash into
sass() will be passed along to
If you want to use the indented syntax (
.sass) as the top level file, use
If you pass
errLogToConsole: true into the options hash, sass errors will be logged to the console instead of generating a
gutil.PluginError object. Use this option with
gulp.watch to keep gulp from stopping every time you mess up your sass.
Pass in your own callback to be called upon successful compilation by node-sass. The callback has the form
callback(css), and is passed the compiled css as a string. Note: This does not prevent gulp-sass's default behavior of writing the output css file.
Pass in your own callback to be called upon a sass error from node-sass. The callback has the form
callback(err), where err is the error string generated by libsass. Note: this does prevent an actual
gulpPluginError object from being created.
If you pass
sync: true into the options hash, sass.renderSync will be called, instead of sass.render. This should help when memory and/or cpu usage is getting very high when rendering many and/or big files.
gulp-sass can be used in tandem with gulp-sourcemaps to generate source maps for the SASS to CSS compilation. You will need to initialize gulp-sourcemaps prior to running the gulp-sass compiler and write the source maps after.
var sourcemaps = require'gulp-sourcemaps';gulpsrc'./scss/*.scss'pipesourcemapsinitpipesasspipesourcemapswritepipegulpdest'./css';// will write the source maps inline in the compiled CSS files
By default, gulp-sourcemaps writes the source maps inline in the compiled CSS files. To write them to a separate file, specify a relative file path in the
var sourcemaps = require'gulp-sourcemaps';gulpsrc'./scss/*.scss'pipesourcemapsinitpipesasspipesourcemapswrite'./maps'pipegulpdest'./css';// will write the source maps to ./dest/css/maps
#Imports and Partials
gulp-sass now automatically passes along the directory of every scss file it parses as an include path for node-sass. This means that as long as you specify your includes relative to path of your scss file, everything will just work.
Before submitting an issue, please understand that gulp-sass is only a wrapper for node-sass, which in turn is a node front end for libsass. Missing sass features and errors should not be reported here.