Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time


Build Status

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

$ jspm install sass --dev

Recommended plugin usage configuration is:

  meta: {
    "*.scss": { "loader": "sass" },
    "*.sass": { "loader": "sass" }

To apply your SASS styles to your current page asynchronously:


or synchronously

import './style.scss';

You can also use the older syntax , known as the indented syntax (or sometimes just "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.


  • 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:

  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.

  sassPluginOptions: {


To enable autoprefixer

sassPluginOptions: {
  "autoprefixer": true


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