使用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"}

可以看到此时生成的类名规范了很多😊