gulp-systemjs-resolver
My Sass Import resolver using systemjs gulp plugin
Install
$ npm install --save-dev gulp-systemjs-resolver
Usage
var gulp = require('gulp');
var sassResolver = require('gulp-systemjs-resolver');
gulp.task('sass', function () {
return gulp.src('src/file.scss')
.pipe(sassResolver({systemConfig: './config.js'}))
.pipe(gulp.dest('dist'));
});
I personally in my project use jspm and configure the package this way for bourbon:
{
"jspm": {
"dependencies": {
"bourbon": "github:thoughtbot/bourbon@^4.2.3"
},
"overrides": {
"github:thoughtbot/bourbon@4.2.3": {
"directories": {
"lib": "bourbon-v4.2.3"
}
}
}
}
}
Then in your scss file, you can import like:
@import "~bourbon/_bourbon.scss"; //Import bourbon file
@import "./variable.scss"; // Import local file
or
var gulp = require('gulp');
var sass = require('gulp-sass');
var sassResolver = require('gulp-systemjs-resolver');
var includePaths = [];
gulp.task('sass', function () {
return gulp.src('src/file.scss')
.pipe(sassResolver({systemConfig: './config.js', includePaths: includePaths}))
.pipe(sass({includePaths: includePaths}))
.pipe(gulp.dest('dist'));
});
and
@import "_bourbon.scss"; //Import bourbon file
@import "./variable.scss"; // Import local file
API
systemjsResolver(options)
options
systemConfig
Type: string
Default: ``
This is the path to the SystemJs config file for example ./config.js
includePaths
Type: Array
Default: []
This is the original includePaths which will be passed to sass plugin
License
MIT © Clément Patout