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

/* @importPath '~bourbon' */
@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