SystemJS SASS loader plugin
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
src
test
.babelrc
.eslintignore Update to work with SystemJS v0.20. Fixes #78. Feb 24, 2017
.eslintrc
.gitignore
.nvmrc
.travis.yml
LICENSE
README.md
package.json

README.md

JSPM SASS/SCSS Plugin

Build Status

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