以前天真地以爲react-css-modules使用與其他插件一樣，npm install安裝一下就好了。
直到我新起了一個項目才知道並沒有這麼簡單，react-css-modules使用是需要修改Webpack配置的。
如果不配置webpack，會報：Uncaught Error: "xxx" CSS module is undefined.等錯誤
關於react-css-modules怎麼用，可參照這篇：【React】防止CSS樣式感染：react-css-modules
Webpack配置
配置Webpack的目的是開啓css-loader模塊化（modules）。
Webpack配置如下
module.exports = {
module: {
//模塊
rules: [
{
//.css.less文件解析
test: /\.(css|less)$/, //匹配到css結尾的文件，加載css-loader，
//去除.module.css;.module.less，因爲有單獨處理
exclude: [/\.module\.(css|less)/, /\.global\.less$/],
use: [
{
loader: 'style-loader',
options: {
//將當前loader添加到<head>標籤內容的最上面
insert: function (element) {
var parent = document.querySelector('head')
var lastInsertedElement =
window._lastElementInsertedByStyleLoader
if (!lastInsertedElement) {
parent.insertBefore(element, parent.firstChild)
} else if (lastInsertedElement.nextSibling) {
parent.insertBefore(element, lastInsertedElement.nextSibling)
} else {
parent.appendChild(element)
}
}
}
},
{
//css單獨分離文件加載
loader: MiniCssExtractPlugin.loader,
options: {
esModule: false
}
},
'css-loader',
'postcss-loader',
'less-loader'
]
},
{
//.module.css;.module.less文件解析，添加css modules，防止樣式感染
test: /\.module\.(css|less)/, //匹配到less結尾的文件
use: [
{
loader: 'style-loader',
options: {
//將當前loader添加到<head>標籤內容的最上面
insert: function (element) {
var parent = document.querySelector('head')
var lastInsertedElement =
window._lastElementInsertedByStyleLoader
if (!lastInsertedElement) {
parent.insertBefore(element, parent.firstChild)
} else if (lastInsertedElement.nextSibling) {
parent.insertBefore(element, lastInsertedElement.nextSibling)
} else {
parent.appendChild(element)
}
}
}
},
{
//css單獨分離文件加載
loader: MiniCssExtractPlugin.loader,
options: {
esModule: false
}
},
{
loader: 'css-loader',
options: {
modules: {
localIdentName: '[local]_[hash:base64:5]'
}
}
},
'postcss-loader',
'less-loader'
]
}
]
}
}
核心原理
.css或.less文件樣式用普通css-loader 加載;
.module.css或.module.less文件樣式開啓modules模塊化，並配置樣式class名字的生成規則；
Webpack5 modules 配置如下：
{
loader: 'css-loader',
options: {
modules: {
localIdentName: '[local]_[hash:base64:5]'
}
}
},
Webpack4 modules 配置如下：
{
loader: 'css-loader',
options: {
sourceMap: false,
importLoaders: 1,
modules: true,
localIdentName: '[local]_[hash:base64:5]'
}
},
