JSPM Loader: CSS
An extensible CSS loader for JSPM.
Install the plugin and name it css
locally
jspm install css=npm:jspm-loader-css
Load the styles by referencing them in your JS:
:local mode
The default CSS loader supports opt-in CSS Modules syntax. So, importing the following CSS file:
)
generates and loads the following CSS
and returns the mapping to JS for you to use in templates:
eleminnerHTML = ``
For the full CSS Modules syntax, where everything is local by default, see the JSPM CSS Modules Loader project.
:export & :import
The loader also supports the CSS Modules Interchange Format.
Import path notation
The path you specify will be processed through SystemJS with your configuration.
For example, with the configuration below :
// Your config.jsSystem
You can write various import paths:
/* Your ike.icss */
Customize your own loader
You can customize this loader to meet your needs.
- Create a
css.js
file under your project folder next toconfig.js
file. - In the
css.js
file, include whatever postcss plugins you need:
const fetch bundle = vars PluginslocalByDefault PluginsextractImports Pluginsscope Plugins __moduleName; ; ``` Just make sure you have `Pluginsautoprefixer` passed to ``, it's required. 3. Since you have had `jspm-loader-css` installed with `jspm install css=npm:jspm-loader-css`, now open `configjs` and replace line ```js "css": "npm:jspm-loader-css@x.x.x" ``` with: ```js "jspm-loader-css": "npm:jspm-loader-css@x.x.x" ``` jspm will use what `cssjs` exports as the default css loader. You can also check [an example css.js file here](https://github.com/geelen/glenmaddern.com/blob/master/src/css.js "Customize your own jspm css loader").