Closed
Description
- Operating System: macOS Mojave 10.14.6
- Node Version: 12.13.1
- NPM Version: 6.14.2
- webpack Version: 4.42.0
- mini-css-extract-plugin Version: 0.9.0
Expected Behavior
Should work with css-module
Actual Behavior
If any css file includes a css-module export, then the HMR breaks.
a.css
:local(.aaa) {
background-color: pink; // hmr warns: do not know how to reload themselves, and style won't update
}
.aa {
background-color: khaki; // hmr warns: do not know how to reload themselves, and style won't update
}
b.css
.bbb {
background-color: skyblue; // this works, no warning, style updated.
}
Those style without css-module will work. scss file is the same behaviour with css.
Code
// webpack.config.js
// If your code blocks are over 20 lines, please paste a link to a gist
// (https://gist.github.com).// additional code, HEY YO remove this block if you don't need it
{
test: /\.s?css$/,
exclude: /node_modules/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
hmr: !isProd,
},
},
{
loader: "css-loader",
options: {
importLoaders: 2,
modules: {
mode: "global",
localIdentName: isProd
? "_[hash:base64]"
: "[path][name]__[local]",
},
},
},
{
loader: "postcss-loader",
options: {
plugins: [
require("autoprefixer")(),
require("postcss-flexbugs-fixes")(),
],
},
},
{ loader: "sass-loader" },
],
},How Do We Reproduce?
just add css-modules into the advanced example shown in readme.md.
Then those css/scss file with a :local() in it will fail to hot reload.
Those css/scss file without any :local() works fine.