css - 具有相同类名的不同 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

显然这是因为自定义注入(inject)名称在 v14 -> v15 从 vue-loader 升级期间被破坏。

这是 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])|--)/, '_$1');

    return selector;
  },
}