具有相同类名的不同css模块互相覆盖

Posted 2023-01-26

例如，我正在使用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]标签。

答案

显然是因为在从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])|--)/, '_$1');

    return selector;
  ,