具有相同 class 名称的不同 css 模块会相互覆盖

Question

我正在使用 webpack 并尝试使用 css 模块作为我的主题，例如：

<style lang="scss" module="theme1">
  .header {
    color: red;
  }
</style>

<style lang="scss" module="theme2">
  .header {
    color: blue;
  }
</style>

然而，两个 .header 标签从 css-loader 获得相同的 localIdentName，因此第二个主题每次都会覆盖另一个。
我的加载器链：vue-loader，css-loader，sass-loader
我当前的 localIdentName：'[local]_[hash:base64:5]'（路径和名称都没有结果，我只是希望有某种 [value] 标签。

Answer 1

显然是因为自定义注入名称在从 vue-loader.

的 v14 -> v15 升级过程中损坏

这是 GitHub 上的问题，其中包含更多详细信息： https://github.com/vuejs/vue-loader/issues/1578

临时解决方案（放在css-loader的模块选项中）：

{
  localIdentName: '[module]_[local]_[hash:base64:5]',
  getLocalIdent(context, localIdentName, localName) {
    const { resourceQuery, resourcePath } = context;
    const { index, module } = loaderUtils.parseQuery(resourceQuery);

    const selector = loaderUtils.interpolateName(context, localIdentName, {
      context: context.rootContext,
      content: resourcePath + resourceQuery + localName,
    })
      .replace(/\[local\]/gi, localName)
      .replace(/\[module\]/gi, typeof module === 'boolean' ? '' : module)
      .replace(/\[index\]/gi, index)
      .replace(new RegExp('[^a-zA-Z0-9\-_\u00A0-\uFFFF]', 'g'), '-')
      .replace(/^((-?[0-9])|--)/, '_');

    return selector;
  },
}

具有相同 class 名称的不同 css 模块会相互覆盖

Different css modules with same class names overwrite each other

css

webpack

css-modules

css-loader