如何在组件SCSS模块中覆盖global.scss的全局类样式？

• 触发pure selector报错：CSS Modules 对:global语法有明确格式要求，顶层全局选择器不能写成:global .xxx的空格分隔形式，必须用括号包裹目标全局类名。
• 前置本地类写法不生效：.banner_home :global .container_page是后代选择器，仅能匹配.banner_home内部嵌套的.container_page节点，如果两个类在同一节点、或者.container_page是.banner_home的祖先/同级节点，选择器完全匹配不到目标元素，自然不会生效。

根据你需要的样式作用范围，二选一即可：

1. 全局生效（所有页面的.container_page都追加样式） #

直接用括号包裹全局类名，这是CSS Modules规定的顶层全局选择器标准写法，不会触发语法报错：

:global(.container_page) {
  min-width: 1200px !important;
}

提示：这种写法和直接在global.scss里写样式效果完全一致，会作用于全项目所有匹配.container_page的节点，不受当前组件的作用域限制。

2. 仅当前组件内生效（不污染全局样式） #

如果只想修改当前组件内的.container_page样式，不影响其他页面，根据DOM结构选择对应写法：

• 场景A：.container_page和本地类.banner_home在同一个DOM节点上（比如组件根节点同时绑定了两个类），用多类拼接的写法，不要加空格：

.banner_home:global(.container_page) {
  min-width: 1200px !important;
}

• 场景B：.container_page是.banner_home内部的嵌套子元素，用嵌套写法即可：

.banner_home {
  // 此处写.banner_home本身的样式
  :global(.container_page) {
    min-width: 1200px !important;
  }
}

如果写完样式仍未生效，直接打开浏览器开发者工具选中目标.container_page节点：

• 检查Elements面板的Styles标签里，是否能看到你写的min-width规则，如果看不到说明选择器匹配错误，对照实际DOM结构调整选择器即可
• 如果能看到规则但是被划掉，说明存在优先级更高的样式，可以适当提升选择器权重

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