From 2ac79c329602818510dbabdc60621111ebac2c34 Mon Sep 17 00:00:00 2001 From: Evilebot Tnawi Date: Tue, 6 Aug 2019 13:53:36 +0300 Subject: [PATCH] docs: example with CSS modules and pure CSS (#983) --- README.md | 43 ++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 42 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 9efadd75..466a8729 100644 --- a/README.md +++ b/README.md @@ -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, @@ -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.