npm install jss-loaderUse JavaScript as your CSS preprocessor!
Dynamically create CSS by executing JavaScript at build time. Export your styles in the JSS format and they'll be converted into regular CSS.
``bash`
$ npm install --save jss-loader jss
Simply export an object of styles from your JavaScript file:
`js`
module.exports = {
'.hello': {
color: 'blue'
},
'.world': {
color: 'green'
}
};
This loader is designed to export global CSS selectors, so it's recommended to use this loader in tandem with CSS Modules via css-loader to create locally scoped class names.
`js
var styles = require('css?modules!jss./component.jss.js');
var html = '
$3
In order to use JSS plugins, simply define the
option in your Webpack config.` javascript
module.exports = {
module: {
loaders: [...]
},
jssLoader:
plugins: [
require('jss-nested'),
require('jss-extend'),
require('jss-vendor-prefixer'),
require('jss-camel-case'),
require('jss-props-sort'),
require('jss-px')
]
};
`If required, you can change the options key with the
query parameter: "css!jss?config=jssLoaderCustom"`. - Oleg Slobodskoi for writing JSS. What an awesome project. I'm so glad I found a way that CSS Modules and JSS could be friends at last.
- Andrey Popp for creating Styling, the main influence for this project.
- Tobias Koppers for writing val-loader, which served as the foundation of this loader. Oh, and for writing Webpack.