node package manager
Love JavaScript? Your insights can make it even better. Take the 2017 JavaScript Ecosystem Survey »


JSS Loader for Webpack

Use 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.


$ npm install --save jss-loader jss


Simply export an object of styles from your JavaScript file:

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.

var styles = require('css?modules!jss./component.jss.js');
var html = '<div class="' + styles.hello + '">Hello World!</div>';

JSS Plugins

In order to use JSS plugins, simply define the jssLoader.plugins option in your Webpack config.

module.exports = {
  module: {
    loaders: [...]
    plugins: [

If required, you can change the options key with the config query parameter: "css!jss?config=jssLoaderCustom".

External Documentation


Webpack: Using loaders


  • 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.


MIT License