Webpack5 配置 CssModules react-css-modules css-loader
阿新 • • 發佈：2022-05-27
以前天真地以為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]' } },
localIdentName 是配置class名字的規則，[local]_[hash:base64:5]表示：用程式碼裡的class名字+下劃線+5位hash值。
因為hash值是隨機且唯一的，所以拼接之後的新名字也是唯一的，這就是css-modules防止樣式感染的原理。
注意：.css或.less檔案與.module.css或.module.less檔案分開配置，是為了防止.css或.less檔案裡的樣式也被混淆，否則如果程式碼裡用到了className引用樣式，就會找不到。
所以需要使用css-modules的功能，需要將樣式檔案命名成檔名.module.css等格式，作為和純css檔案的區分。
好了，又記完一坑，希望你能成功！
轉載：https://maomao.ink/index.php/IT/1569.html