使用localIdentName來自定義模塊化的類名

從本質上理解CSS模塊化

怎麼來理解CSS模塊化？是爲CSS添加了作用域嗎？不是的！你可以這麼理解CSS模塊化：CSS模塊化其實就是將類名變成鍵，通過隨機生成的值作爲真正的類名，從而避免CSS作用域衝突的問題。如果你將系統隨機生成的類名賦給引入該CSS文件以外的部分依然是可以生效的。下面來驗證這一點：
我們首先在控制檯打印一下導入的cssobj：

{title: "_1_SjtDCiFqhB0kvNkh5p4F"}

如果我們將該系統生成的類名添加給項目中沒有導入該css文件的HTML元素，比如：

<h1 class="_1_SjtDCiFqhB0kvNkh5p4F">David</h1>

該h1也會顯示css樣式表中爲title類定義的樣式規則。

自定義模塊化的類名

從上面可以看到，當啓用了CSS模塊化之後，系統會爲樣式表中的每一個類生成一段隨機值作爲真正的類名，不再使用之前用戶定義的類名。我們可以對這個生成類名的過程加入一些干涉，使其生成有規律的類名，只要該類名滿足不會相同即可（隨機數相等的概率極小）。

使用localIdentName自定義生成的類名格式

可選的參數有：

• [path] 表示樣式表相對於項目根目錄所在路徑
• [name] 表示樣式表文件名稱
• [local] 表示樣式的類名定義名稱
• [hash:length] 表示32位的hash值
  注意：不要直接在css-loader後面直接加參數，下面的方法會打包失敗：

{
   test: /\.css$/,
   use: ["style-loader", "css-loader?modules&localIdentName=[path][name]-[local]-[hash:5]"]
}

可以寫成下面這種形式：

{
    test: /\.css$/,
    use: [
        {loader: "style-loader"},
        {
            loader: "css-loader",
            options: {
                modules:{
                    localIdentName: "[path][name]-[local]-[hash:5]"
                }
            }
        }
    ]
}

現在在控制檯再打印cssobj，顯示如下：

{title: "src-css-styles-title-29911"}

可以看到此時生成的類名規範了很多😊