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:
import from './styles.css!'
The default CSS loader supports opt-in CSS Modules syntax. So, importing the following CSS file:
:local(.myComponent) {}
generates and loads the following CSS
._path_to_file__myComponent {}
and returns the mapping to JS for you to use in templates:
import styles from './styles.css!'
elem.innerHTML = `<div class="${styles.myComponent}"></div>`
For the full CSS Modules syntax, where everything is local by default, see the JSPM CSS Modules Loader project.
The loader also supports the CSS Modules Interchange Format.
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:import { CSSLoader, Plugins } from 'jspm-loader-css' import vars from 'postcss-simple-vars' // you want to use this postcss plugin export default new CSSLoader([ vars, Plugins.autoprefixer() ], __moduleName)
Just make sure you have
Plugins.autoprefixer
passed tonew CSSLoader
, it's required. -
Since you have had
jspm-loader-css
installed withjspm install css=npm:jspm-loader-css
, now openconfig.js
and replace line"css": "npm:jspm-loader-css@x.x.x"
with:
"jspm-loader-css": "npm:jspm-loader-css@x.x.x"
jspm will use what
css.js
exports as the default css loader.
You can also check an example css.js file here.