csso 报错 "Selector can't has classes from different scopes" 怎么修

Wed, 30 Sep 2026 00:00:00 +0000

webpack 打包时，CSS 压缩阶段挂了：

Selector can't has classes from different scopes

真正原因

这个报错来自 csso（CSS 压缩工具）。它只会在一种情况下出现：构建时给 csso 传了带 scopes 的 usage 数据——一般是通过 css-minimizer-webpack-plugin（用 csso 做 minifier）或 csso-webpack-plugin 传进去的。

scopes 是 csso 为 CSS Modules 这类"作用域隔离"方案准备的优化手段：你告诉 csso 哪些类名属于同一个 scope（即它们永远不会出现在同一份 markup 上），csso 就能更大胆地合并 ruleset。根据 csso 官方文档，这个异常只在两种情况下抛出：

同一个类名被写进了多个 scope；
一个选择器里混用了来自不同 scope 的类。

没写进任何 scope 的类名默认属于 default scope，不会报错。

怎么修

先找到构建配置里给 csso 传 usage / scopes 的地方，例如：

// webpack.config.js
new CssMinimizerPlugin({
 minify: CssMinimizerPlugin.cssoMinify,
 minimizerOptions: {
 usage: {
 scopes: [
 ["header-title", "header-nav"],
 ["card-title", "card-body"],
 ],
 },
 },
})

然后对着上面两种情况排查：

Csso on 毛毛星 Felix Mao - AI 创作者、前端工程师与独立开发者

csso 报错 "Selector can't has classes from different scopes" 怎么修

真正原因

怎么修