JSS Loader for Webpack

Create your styles in the JSS format and use this loader to load the modules. Used in combination with the JSS-Text-Extractor to extract the generated CSS as a separate bundle (to avoid FOUT).

Based heavily on the original JSS loader. However, the original did not allow for a mechanism to extract the generated CSS.

Compatibility with Extract-text-webpack-plugin borrowed heavily from Styling; Big shout-out to @andreypopp wouldn't have been able to figure out the proper loader order with multiple child compilers without him.

Install

``bash
$ npm install --save jss-module-loader jss
`

Usage

In your webpack config:

`
import jssLoader from 'jss-module-loader';

...
loader: jssLoader(/ postLoaders /, / preloaders /);
...
`

With Extract-text-webpack-plugin:

`
import jssLoader from 'jss-module-loader';

...
loader: jssLoader([ExtractTextWebpackPlugin.loader(), / postLoaders /], / preloaders /);
...
`




$3

In order to use JSS plugins, simply define the jssLoader.plugins 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 config query parameter: "jss-module-loader?config=jssLoaderCustom"`.

External Documentation

JSS
Webpack: Using loaders

License

MIT License