node-scssify
v1.0.0
Published
Browserify middleware for adding required styles to the page.
Downloads
1
Readme
node-scssify
Simple middleware and method for Browserify to add Sass styles to the browser.
Example
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 node-scssify into your app:
$ npm install node-scssify
When you compile your app, just pass -t node-scssify
to browserify:
$ browserify -t node-scssify entry.js > bundle.js
Gulp task example
...or you can do it using a gulp task.
var gulp = require('gulp');
var browserify = require('browserify');
var sassify = require('node-scssify');
var source = require('vinyl-source-stream');
gulp.task('build', function(done) {
var result = browserify({})
.transform(sassify, {
'auto-inject': true, // Inject css directly in the code
base64Encode: false, // Use base64 to inject css
sourceMap: false // Add source map to the code
});
result.add('./entry.js');
result.bundle()
.pipe(source('output.js'))
.pipe(gulp.dest('./'))
.on('end', function(err) {
if (err) {
done(err);
} else {
done();
}
});
});
Imports
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.