Skip to content

Commit 05f5efa

Browse files
committed
Docs.
1 parent b27bbcd commit 05f5efa

File tree

1 file changed

+33
-2
lines changed

1 file changed

+33
-2
lines changed

README.md

Lines changed: 33 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@ Seamless mapping of class names to CSS modules inside of React components.
77

88
- [What's the Problem?](#whats-the-problem)
99
- [Usage](#usage)
10+
- [webpack](#webpack)
11+
- [Browserify](#browserify)
1012
- [Options](#options)
1113
- [`allowMultiple`](#allowmultiple)
1214
- [`keepOriginal`](#keeporiginal)
@@ -80,6 +82,37 @@ Refer to the [react-css-modules-examples](https://github.com/gajus/react-css-mod
8082

8183
## Usage
8284

85+
Setup a module bundler to load your [ICSS](https://github.com/css-modules/icss).
86+
87+
### webpack
88+
89+
* Install [`style-loader`](https://www.npmjs.com/package/style-loader) and [`css-loader`](https://www.npmjs.com/package/css-loader).
90+
* You will also need to use [`extract-text-webpack-plugin`](https://www.npmjs.com/package/extract-text-webpack-plugin) to aggregate the CSS into a single file.
91+
* Setup a `/\.css$/` loader:
92+
93+
```js
94+
{
95+
test: /\.css$/,
96+
loader: ExtractTextPlugin.extract('style', 'css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]')
97+
}
98+
```
99+
100+
* Setup `extract-text-webpack-plugin` plugin:
101+
102+
```js
103+
new ExtractTextPlugin('app.css', {
104+
allChunks: true
105+
})
106+
```
107+
108+
Refer to [webpack-demo](https://github.com/css-modules/webpack-demo) or [react-css-modules-examples](https://github.com/gajus/react-css-modules-examples) for a complete setup.
109+
110+
### Browserify
111+
112+
Refer to [`css-modulesify`](https://github.com/css-modules/css-modulesify).
113+
114+
### `CSSModules`
115+
83116
```js
84117
/**
85118
* @typedef CSSModules~Options
@@ -96,8 +129,6 @@ Refer to the [react-css-modules-examples](https://github.com/gajus/react-css-mod
96129
*/
97130
```
98131

99-
First you need to setup [webpack](http://webpack.github.io/docs/) to load your css files using "css" loader and enable CSS modules. You will also need to use `extract-text-webpack-plugin` to aggregate the CSS into a single file. Refer to [webpack-demo](https://github.com/css-modules/webpack-demo).
100-
101132
Then you need to decorate your component using `CSSModules`, e.g.
102133

103134
```js

0 commit comments

Comments
 (0)