Simple middleware and method for Browserify to add Sass styles to the browser.
Currently breaks in some cases on node 0.11.x with latest version (2.0.1) of node-sass as documented in node-sass issue #550. This is also the reason why node 0.11 is currently not supported. Use at your own risk (though no actual risk is involved, it might just not work).
If you have a file entry.js that you want to require some css from style.scss:
style.scss:
body {
background: pink;
}entry.js:
require('./style.scss');
console.log('The background is pink!')Or indented Sass syntax may be used with the .sass extension:
require('./style.sass');Install sassify into your app:
$ npm install sassify
When you compile your app, just pass -t sassify to browserify:
$ browserify -t sassify entry.js > bundle.js
...or you can do it using a gulp task.
var gulp = require('gulp');
var browserify = require('browserify');
var sassify = require('sassify');
var source = require('vinyl-source-stream');
gulp.task('build', function(done) {
var result = browserify({})
.transform(sassify, {
base64Encode: false, // Use base64 to inject css
sourceMap: false, // Add source map to the code
// when 'no-auto-inject' is set to `true`, `require('./style.scss')` won't inject styles
// it will simply return the css as a string
'no-auto-inject': false
});
result.add('./entry.js');
result.bundle()
.pipe(source('output.js'))
.pipe(gulp.dest('./'))
.on('end', function(err) {
if (err) {
done(err);
} else {
done();
}
});
});Sass allows one to @import other Sass files. This module synchronously imports those dependencies at the time of the bundling. It looks for the imported files in both the directory of the parent file and the folder where the module itself lives, so it should work so long as the paths in the @import commands are correct relative to the importing file, as usual. It is not currently tested for recursive importing.
