使用 Webpack 加载 CSS 选择器时，随机文本会被填充到 CSS 选择器中吗？答案

【问题标题】：Random text is padded to CSS selectors when loading them using Webpack?使用 Webpack 加载 CSS 选择器时，随机文本会被填充到 CSS 选择器中吗？
【发布时间】：2017-11-29 16:21:32
【问题描述】：

例如，对于所有选择器，.rc-menu 变为 .index__rc-menu__FStjN 等等。

【问题讨论】：

标签： javascript css node.js import webpack

【解决方案1】：

查看CSS Loader 的配置。默认情况下，名称是这样的，但可以更改：

{
    loader: 'css-loader',
    options: {
        modules: true,
        localIdentName: '[path][name]__[local]--[hash:base64:5]',
        getLocalIdent: (context, localIdentName, localName, options) => {
          return 'whatever_random_class_name'
        }
    }
}

【讨论】：

谢谢！你能详细说明这种做法的原因吗？我的意思是填充散列，这不会使 CSS 类无法使用吗？
实际上，它使它们更可用（或可重用）。这个想法与CSS Modules 有关。例如，在一个 React 应用程序中，我可以有 2 个不相关的组件，它们都有一个类 .container。如果他们各自的 CSS 文件对 .container 的定义不同，那么我们就会发生冲突。这使您可以跨组件重用类，而完全不用担心冲突。
知道了。再次感谢您。