Skip to content

A SystemJS plugin which will convert sass and return it inline to allow use for any purpose

License

Notifications You must be signed in to change notification settings

kevcjones/plugin-scss

Repository files navigation

plugin-scss

Build Status devDependency Status

At a Glance

Originally forked from plugin-sass

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

$ jspm install scss

The decision that it was unlikely that plugin-sass team would ever merge our changes back into the plugin-sass. They have a fundamental differece in use. Plugin-sass is cleaner if all you want to do is load your styles into the head block. However we had a very different use case.

We wanted to transpile our .scss content and return the css as a string so that we could inject it where ever we please. In particular, we wanted to inject into Angular 2's styles decorator.

Using it looks like this in its various forms :

System.import('./style.scss!').then(function(css){
  //inject css in head?
  //pass css into angular2 @component styles tag [up to you]
});

or synchronously

import styles from './style.scss!';
//styles will contain your css ready again for what you need

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

System.import('./style.sass!scss').then(function(css){
  //inject your css anywhere you need
});

Compile Targets

Style

By default, plugin-scss does NOT inject compiled css into a <style> tag in the <head>. It instead returns your css as a string. Use plugin-sass if you need this behaviour.

Strings for angular 2

As mentioned above - plugin-scss was a modification of the original plugin specifically because we needed a string that was for use in the @component decorator. It was different enough to feel like a new plugin.

import styles from './style.scss!';

@Component({
    template: '...',
    styles: [styles]
})

SASS options

To add SASS options

sassPluginOptions: {
  "sassOptions": {

  }
}

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';

Bundling using JSPM/SystemJS

We've work on the bundle support, this was where most of the work was done when extending from plugin-sass. Fundamentally, we didn't need to write into the bundle in a special way to inject the css into head. So instead, we used the hooks for translate and fetch to work very similarly to the normal 'inject' route in browser.

Testing the plugin

$ npm install -g gulp
...
$ npm install
...
$ jspm install

Now you can test runtime compilation

$ gulp test:runtime

bundling

$ gulp test:bundle

or static bundling

$ gulp test:bundleStatic

After that open http://localhost:3000 in the browser of your choice.

About

A SystemJS plugin which will convert sass and return it inline to allow use for any purpose

Resources

License

Stars

Watchers

Forks

Packages

No packages published