JSPM SASS/SCSS Plugin

SystemJS SASS loader plugin. Can easily be installed with jspm package manager.

$ jspm install sass --dev

Recommended plugin usage configuration is:

SystemJS.config({
  meta: {
    "*.scss": { "loader": "sass" },
    "*.sass": { "loader": "sass" }
  }
});

To apply your SASS styles to your current page asynchronously:

System.import('./style.scss');

or synchronously

import './style.scss';

You can also use the older syntax , known as the indented syntax (or sometimes just "Sass")

System.import('./style.sass');

Note: if you use a different transpiler as Babel, like TypeScript, the plugin does not work by default. This is because this plugin and jspm / SystemJS is based on ES2015 syntax. All code is written with the Babel transpiler so you have to use the transpiler first before you can use the plugin. Please have a look at issue #25 for a solution.

Features

• sass, scss
• @import supported
• "jspm:" prefix to refer jspm package files
• url rewrite and asset copier
• autoprefixer with custom configuration
• minified and non minified build
• bundle css separately or inline into build

Importing from jspm

You can import scss files from jspm packages from within scss files using the jspm: prefix. For example, if you have jspm installed twbs/bootstrap-sass:

@import 'jspm:bootstrap-sass/assets/stylesheets/bootstrap';

Legacy options

Some legacy plugin-css options are supported:

System.config({
  separateCSS: false, // change to true to separate css from js bundle
  buildCSS: true,     // change to false to not build css and process it manually
});

• separateCSS: true|false, default to false, set to true to separate css from js bundle, works well if plugin-css is not used, otherwise both plugins will try to save css in the same file and one will overwrite results of another one.
• buildCSS: true|false, defalt to true, set to to not build css and process it manually.

Configuring the plugin

You can configure some options how the plugin should behave. Just add a new sassPluginOptions config object to your config.js.

System.config({
  sassPluginOptions: {
  }
})

Autoprefixer

To enable autoprefixer

sassPluginOptions: {
  "autoprefixer": true
}

or

sassPluginOptions: {
  "autoprefixer": {
    "browsers": ["last 2 versions"]
  }
}

SASS options

To add SASS options

sassPluginOptions: {
  "sassOptions": {

  }
}

URL rewriter and asset copier

Options rewriteUrl enables rewrite scss URLs to use correct path from SystemJS base URL.

Option copyAssets enables copy CSS-related assets into destination folder.

jspm build app dist/app.js --format global --minify --skip-source-maps

sassPluginOptions: {
  "copyAssets": true,
  "rewriteUrl": true
}

Testing the plugin

$ npm install
...
$ jspm install

To run unit tests just do a

$ npm run test

To test that everything works in your browser you can test runtime compilation

$ npm run test:runtime

or bundling

$ npm run test:bundle

or self-executing bundle

$ npm run test:bundleSfx