mindspop / webpack-demo

Working demo of CSS Modules, using Webpack's css-loader in module mode

CSS Modules Webpack Demo

A working demo of CSS Modules, using Webpack's css-loader in module mode.

Run the example

$ npm install
$ npm start & open http://localhost:8080

npm modules required for CSS modules

In this project's package.json file you find a lot of npm modules for this demo application. Since not all of them are required for the actual CSS modules features, we've created the following list to describe their purposes.

Required modules

The following modules are the only ones really needed to get started with CSS modules:

Module	Description
Webpack	Webpack (obviously...)
webpack-dev-server	(Optional) Supports hotloading of changed files etc while developing
style-loader and css-loader	style-loader and css-loader process your CSS files. css-loader is the loader that actual makes CSS modules work

To make CSS modules work with Webpack you only have to include the modules mentioned above and add the following loader to your webpack.config.js file:

. . .
{
  test: /\.css$/,
  loader: 'style!css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]' 
}
. . .

Optional modules

The following modules control the actual CSS processing. They are not CSS modules specific and can be used with both "regular" CSS and CSS modules:

Module	Description
postcss-loader	Allows execution of various CSS post processor in Webpack. Required for autoprefixer-core and postcss-color-rebeccapurple
autoprefixer-core	Add vendor-prefixes to your css code (according to the GitHub page it is deprecated and should be replaced by autoprefixer
postcss-color-rebeccapurple	Another CSS post processor. Only needed to support rebeccapurple color in CSS
extract-text-webpack-plugin	Writes the CSS code processed by Webpack into an own CSS-file and not into the generated bundle JavaScript file.

Unrelated modules

This modules are only needed for the demo application:

Module	Description
babel	ESx-to-ES5 compiler. Mostly needed for React code
ejs	JavaScript templating language
react-to-html-webpack-plugin	Webpack plug-in that renders React components
node-libs-browser	Node libraries for in-browser use
gh-pages	Publishes file to a gh-pages branches for GitHub pages
url-loader	Webpack file handling, e.g. for images
file-loader	Webpack file handling, e.g. for images
raw-loader	It’s used to load raw css files (as utf8) into the demo so it can be rendered into <code>

License

MIT