Utility to simplify creating importers for node-sass
Utility to simplify creating importers for node-sass.
Allows to define how node-sass should process @import
directives with custom resources (e.g. json or js files).
var sass = require('node-sass');
var builder = require('node-sass-importer-builder');
var importer = builder(/REGEXP/, function(filepath) {
return someTransformOperation(filepath);
});
var result = sass.renderSync({
file: 'example.scss',
importer: importer
});
via Webpack:
var builder = require('node-sass-importer-builder');
var importer = builder(/REGEXP/, function(filepath) {
return someTransformOperation(filepath);
});
module.exports = {
module: {
loaders: [{
test: /\.scss$/,
loaders: ["style", "css", "sass"]
}]
},
sassLoader: {
importer: importer
}
}
builder(pattern:RegExp, handler:Function)
pattern
- regular expression pattern to match importing file.handler(filepath)
- function which somehow handles importing file in SASS-compatible data type.builder.toSassString(value)
Helper to convert javascript value to SASS data type. Taken from rootbeer package.
For example you need to share screen breakpoints config between javascript components and SCSS stylesheets:
// breakpoints.js
module.exports = {
xsmall: 0, small: 640,
medium: 960, large: 1200,
xlarge: 1440
}
Here we just calls nodejs require
to get configuration object and return it:
var importer = builder(/\.js$/, function(filepath) {
return require(filepath);
});
Using this example.scss:
@import "breakpoints.js";
You will get:
$breakpoints: (
"xsmall": 0,
"small": 640,
"medium": 960,
"large": 1200,
"xlarge": 1440
);
var fs = require('fs');
var yaml = require('js-yaml');
var builder = require('node-sass-importer-builder');
var yamlImporter = builder(/\.yml$/, function(filepath) {
return yaml.safeLoad(fs.readFileSync(filepath, 'utf8'));
});