我想在我的react应用程序中使用scss模块,但是每次在我的react组件中更改styleName时,在热重载期间都会收到错误Could not resolve styleName
。我注意到,如果styleName没有相应的scss样式,我也会收到错误。我必须每次重新启动服务器才能重新编译。我的配置有什么问题吗?
webpack.dev.js
const webpack = require('webpack')
const BrowserSyncPlugin = require('browser-sync-webpack-plugin')
module.exports = require('./webpack.base')({
mode: 'development',
devServer: {
hot: true,
port: 3000,
historyApiFallback: true
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new BrowserSyncPlugin(
{ proxy: 'http://localhost:3000/', open: false },
{ reload: false }
)
],
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
plugins: [
[
'react-css-modules',
{
"filetypes": {
".scss": { "syntax": "postcss-scss" }
},
"generateScopedName": '[name]_[local]_[hash:base64:5]'
}
],
],
},
},
resolve: {
extensions: ['.js', '.jsx']
}
},
{
test: /\.(sa|sc)ss$/,
use: [
{ loader: 'style-loader' },
{
loader: 'css-loader',
options: {
modules: true,
sourceMap: false,
localIdentName: '[name]_[local]_[hash:base64:5]'
}
},
{
loader: 'sass-loader'
}
]
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader', 'postcss-loader']
},
]
}
})