React项目全局引入min.css后组件级scss样式被覆盖问题咨询

方案1：调整入口文件导入顺序（成本最低） #

当前样式覆盖的核心原因是index.js中的导入顺序错误：你先导入了包含组件scss的App组件，再导入全局library.min.css，打包后样式会按照导入顺序依次插入到页面head中，同优先级样式后插入的会覆盖先插入的。
只需要把全局样式的导入移动到所有业务组件导入之前即可：

import ReactDOM from "react-dom";
// 先导入全局样式
import "library/library.min.css";
// 再导入业务组件
import App from "src/App";

ReactDOM.render(<App />, document.getElementById("root"));

• 优点：无需修改任何样式代码、无需调整构建配置，改动量极小，不影响组件样式的按需加载。
• 缺点：需要团队约定导入顺序，后续如果误调整入口导入顺序可能复现问题。

方案2：提升组件样式权重（最稳定） #

给所有组件的样式套一层根组件类名嵌套，天然提升样式优先级，无需关心样式加载顺序：
比如App组件的scss可以这么写：

.app-container {
  // 所有组件样式都嵌套在根类名下
  .xxx {
    background-color: #fff;
  }
}

嵌套后的样式权重是两个类名，远高于全局库的单类名权重，不管加载顺序如何都不会被覆盖。

• 优点：稳定性极高，不受导入顺序、构建配置影响。
• 缺点：需要对现有组件样式做嵌套改造，有一定的改造工作量。

方案3：使用CSS原生@layer规则（长期最优） #

CSS层叠层（@layer）是W3C原生提供的样式优先级管理规则，可以直接声明不同层的优先级高低，完全不用关心样式的加载顺序：
首先在全局入口最顶部声明层优先级：

/* 优先级从低到高：reset < 第三方库样式 < 组件样式 */
@layer reset, library, components;

然后将第三方库的样式归入library层，组件样式归入components层即可。以vite为例，可以直接在导入时指定所属层：

import "library/library.min.css?layer=library";

组件的scss文件顶部加上一行声明即可：

@layer components;
// 原有样式内容不变

• 优点：符合原生规范，灵活性最高，完全不影响按需加载，不需要关心导入顺序，也不用修改原有样式代码。
• 缺点：需要浏览器支持@layer规则（现代浏览器均已支持，若需要兼容IE则不适用）。

你当前使用的全量导入scss的方案确实会导致首屏加载的样式体积变大，非首屏组件的样式也会被提前加载，不推荐在中大型项目中使用。

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