A working demo of CSS Modules, using Webpack's css-loader in module mode.
$ npm install $ npm start & open http://localhost:8080npm 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:
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 forautoprefixer-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 agh-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>
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4