CSS Modules中通过composing覆盖全局CSS样式失效问题求助

这个问题的核心在于CSS类选择器的优先级规则和最终打包后CSS样式的加载顺序：

当你使用composes: col-1-4 from global时，CSS Modules并不会把全局类.col-1-4的样式复制到你的组件模块CSS中，而是直接让目标DOM元素同时拥有两个类：

• 模块生成的哈希类（比如col14__3bA8W）
• 全局类col-1-4

由于这两个选择器都是普通类选择器，优先级完全相同，此时浏览器会采用后加载的样式规则来覆盖先加载的。你的场景中，最终全局类.col-1-4的padding-right:20px覆盖了模块类的padding-right:0，说明全局CSS的样式规则在最终打包后的CSS文件中，位置晚于你的组件模块CSS规则。

为什么会出现这个顺序？因为你在入口JS中先引入了全局file.css，但Webpack对不同loader处理的文件可能有不同的打包逻辑——普通css-loader处理的全局CSS，可能被插入到了CSS Modules处理的模块CSS之后，导致全局样式后来居上。

这里有几个可行的解决思路，按推荐程度排序：

1. 提升局部样式的优先级 #

在组件模块CSS中，通过嵌套选择器让局部样式的优先级高于全局类：

.col14 {
  composes: col-1-4 from global;
  /* 用自身类再次嵌套，提升优先级 */
  &.col14 {
    padding-right: 0;
  }
}

这样生成的选择器是.col14__3bA8W.col14__3bA8W，优先级比单一的.col-1-4更高，就能顺利覆盖样式。

2. 调整CSS的加载顺序 #

确保组件模块CSS的样式在全局CSS之后加载：
你可以尝试将全局CSS的import语句，从入口JS移到组件文件的末尾（即在import styles from './component.module.css'之后），这样Webpack会把模块CSS先打包，全局CSS后打包？不对，Webpack的打包顺序是先import的先输出，所以如果你想让模块CSS的规则在全局之后生效，应该让模块CSS的import在全局CSS之后执行。

或者更可靠的方式，给处理.module.css的style-loader添加配置，控制模块样式标签的插入位置：

// Webpack配置中针对.module.css的规则
{
  test: /\.module.css$/,
  use: [
    {
      loader: 'style-loader',
      options: {
        insert: function(element) {
          // 把模块的style标签插入到现有所有样式标签的后面
          const lastStyle = document.querySelector('link[rel="stylesheet"], style');
          if (lastStyle) {
            lastStyle.parentNode.insertBefore(element, lastStyle.nextSibling);
          } else {
            document.head.appendChild(element);
          }
        }
      }
    },
    { loader: 'css-loader', options: { modules: true } }
  ]
}

3. 避免使用composes，直接组合类 #

如果不需要继承全局类的其他样式，或者只是想覆盖部分样式，可以直接在组件中同时应用全局类和模块类：

// 组件代码
import './css/thirdparty/file.css';
import styles from './component.module.css';

// 渲染时同时添加两个类
<div className={`col-1-4 ${styles.col14}`}></div>

然后模块CSS中只写需要覆盖的样式：

.col14 {
  padding-right: 0;
}

只要模块CSS在全局CSS之后加载，就能顺利覆盖。

内容的提问来源于stack exchange，提问作者tima