You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
SystemJSSCSS 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
importstylesfrom'./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.
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:
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.
