CSS Modules works by compiling individual CSS files into both CSS and data. The CSS output is normal, global CSS, which can be injected directly into the browser or concatenated together and written to a file for production use. The data is used to map the human-readable names you've used in the files to the globally-safe output CSS.

There are currently 4 ways to integrate CSS Modules into your project. You should look to each of these projects for more detailed setup instructions.

The css-loader has CSS Modules built-in. Simply activate it by using the ?modules flag. We maintain an example project using this at css-modules/webpack-demo.

The plugin css-modulesify gives your Browserify build the ability to require a CSS file and compile it as a CSS Module. For an example project using this setup, check out css-modules/browserify-demo.

The experimental JSPM loader jspm-loader-css-modules adds CSS Modules support to SystemJS & JSPM. There's a simple project using this at css-modules/jspm-demo.

The css-modules-require-hook works similarly to the Browserify plugin, but patches NodeJS's require to interpret CSS files as CSS Modules. This gives complete flexibility in how the output is handled, ideal for server-side rendering.

If you're using React, CSS Modules is a great fit. The react-css-modules adds a CSSModules higher-order component or @CSSModules annotation for better integrating CSS Modules & React.

As we find examples in the wild, we'll add them here (or edit this and add a PR).

• cssmodul.es - search for css modules on npm

• ultimate hot reloading example by Glen Mailer
• neob by Julio Ody
• ng-modular by Nik Butenko
• angular-cssmodules-example-app by Jonathan Ingram