Originally forked from plugin-sass
SystemJS SCSS loader plugin. Can easily be installed with jspm package manager.
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
});
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.
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]
})
To add SASS options
sassPluginOptions: {
"sassOptions": {
}
}
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.
$ npm install -g gulp ... $ npm install ... $ jspm install
Now you can test runtime compilation
bundling
or static bundling
After that open http://localhost:3000 in the browser of your choice.
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4