在做webpack的DEMO时，打包CSS，为什么类名会变乱码？

Question

CSS里，如果是标签选择器，是正常的，

如果是类名，就会变乱码

配置文件

Answer 1

这个是将你的class名变成hash值，这样可以防止你的样式名重名了。获取当然是获取不到的，因为webpack是将你的源码打包了，然后你设置了之后，他就变成hash值，你通过获取原先class名想找到dom是不可能的。两种方式，一种是不变成hash值，另外一种是使用变成hash值后再去找dom。如变成hash值后是w5ds6d3213_245ad,那么你就通过document.getElementByClassName("w5ds6d3213_245ad").这样就能获得了。

Answer 2

这不是乱码，这是css modules

Answer 3

官方文档中：“文档”-“LOADER”下的“css-loader”中说到：“您还可以通过自定义 getLocalIdent 函数来指定绝对路径，以根据不同的模式(schema)生成类名。这需要 webpack >= 2.2.1（options 对象支持传入函数）。”

 {
    test: /\.css$/,
    use: ExtractTextPlugin.extract({
        fallback: "style-loader",
        use: [
            {
                loader: "style-loader"
            },{
                loader: "css-loader",
                options: {
                    modules: true,
                    localIdentName: '[path][name]__[local]--[hash:base64:5]',
                    getLocalIdent: (context, localIdentName, localName, options) => {
                                return localName
                            }
                        }
            }, {
                loader: "postcss-loader"
                }]
                })}

此设置可以保证类名和本地设置类名相同。