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

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

clempat / gulp-systemjs-resolver