Skip to content

Commit

Permalink
docs: example with CSS modules and pure CSS (#983)
Browse files Browse the repository at this point in the history
  • Loading branch information
evilebottnawi authored Aug 6, 2019
1 parent 967fb66 commit 2ac79c3
Showing 1 changed file with 42 additions and 1 deletion.
43 changes: 42 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -873,7 +873,7 @@ module.exports = {
use: ['style-loader', 'css-loader'],
},
{
test: /\.(png|jpe?g|gif|svg|eot|ttf|woff|woff2)$/,
test: /\.(png|jpe?g|gif|svg|eot|ttf|woff|woff2)$/i,
loader: 'url-loader',
options: {
limit: 8192,
Expand All @@ -892,6 +892,47 @@ For production builds it's recommended to extract the CSS from your bundle being

- As an alternative, if seeking better development performance and css outputs that mimic production. [extract-css-chunks-webpack-plugin](https://github.com/faceyspacey/extract-css-chunks-webpack-plugin) offers a hot module reload friendly, extended version of mini-css-extract-plugin. HMR real CSS files in dev, works like mini-css in non-dev

### CSS modules and pure CSS

When you have pure CSS (without CSS modules) and CSS modules in project you can use this setup:

**webpack.config.js**

```js
module.exports = {
module: {
rules: [
{
// For pure CSS (without CSS modules)
test: /\.css$/i,
exclude: /\.module\.css$/i,
use: ['style-loader', 'css-loader'],
},
{
// For CSS modules
test: /\.module\.css$/i,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
modules: true,
},
},
],
},
{
test: /\.(png|jpe?g|gif|svg|eot|ttf|woff|woff2)$/i,
loader: 'url-loader',
options: {
limit: 8192,
},
},
],
},
};
```

## Contributing

Please take a moment to read our contributing guidelines if you haven't yet done so.
Expand Down

0 comments on commit 2ac79c3

Please sign in to comment.