最佳实践 2022-3：三方样式覆盖

计划近期每周更新 1 篇 Bigfish 2022 版的最佳实践，这是第 3 篇。

现有方案

我们在项目中，难免有一些场景需要进行三方库样式的覆盖，比如 antd、antv、monaco-editor、echarts 等，尤其是当对方没有提供样式覆盖功能或者提供了但不满足需求时，就需要通过相对暴力的方式进行样式覆盖。虽然覆盖样式存在风险，比如依赖更新后结构变了，但却又是某些场景下的强需求。

Bigfish / Umi 提供了 global.less 的全局样式方案。这个文件的本意是提供全局样式的引入，比如全局的 reset 样式、三方库样式的全局引入等，但大家也通常会在此进行三方库的样式覆盖。

比如：

.ant-layout {
  min-height: 68vh;
}

但是，这种用法其实存在一些不易被发现的隐藏问题。并且这个问题困扰依旧，经常会遇到反馈说「为啥我的样式覆盖没有生效？」。

问题

因为样式是有优先级的。

// antd.css
.ant-layout { color: red; }
// global.less
.ant-layout { color: green; }

我们期望是如上这样，global.less 覆盖 antd.css 里的样式定义。但由于一些原因，加载顺序可能变成以下这样，从而导致样式覆盖失效。

// global.less
.ant-layout { color: green; }
// antd.css
.ant-layout { color: red; }

原因可能有，

1、动态加载。 出于性能考虑，我们会做基于路由的代码拆分，这样如果某个页面引用了 antd，那 antd 的样式就会和这个页面打包到一起，然后迟于 global.less 的加载。
2、按需加载。 同样出于性能考虑，我们可能会做重型组件的按需加载，比如使用 import() 的方式挂载 antv 组件，而动态加载 JS 和 CSS 会在打包时拆出去，也会迟于 global.less