异步组件样式被覆盖的根源是注入晚、权重低、无作用域隔离；解法包括用@layer声明层级、提升选择器特异性、容器隔离第三方样式，并验证样式是否正确分块。
异步组件的 CSS 不会“主动覆盖”全局样式，真正的问题是：它被插入 DOM 的时机晚、选择器权重低、又没做作用域隔离，结果在层叠顺序和特异性上双双输给早加载的全局样式——reset.css 或 base.scss 里的 .btn 一出手就赢了。
为什么异步组件样式总被压？
浏览器解析 CSS 是异步的，但层叠规则不看“谁先写”，只看“谁更具体 + 谁后注入”。异步组件的样式通常通过动态 <link> 或 JS 注入（比如 Vue 的 defineAsyncComponent、React 的 lazy），比入口文件里 import './styles/global.scss' 晚得多。哪怕你写了 .MyButton { color: red; }，只要全局有 button.btn { color: blue; }，后者就大概率生效。
- 全局样式通常打包进
style.css，同步加载；异步组件样式走 chunk，延迟加载 - Sass 编译后不改选择器权重，
.MyButton和.btn都是 0,1,0，胜负取决于注入顺序和特异性 - 很多构建工具（如 Vite）对异步 CSS 的
<link rel="stylesheet">插入位置不可控，容易插到全局样式后面但权重不够
用 @layer 显式声明层级优先级
@layer 是目前最干净的解法，它不依赖加载顺序，而是提前划定“地盘”。把全局样式放进 @layer base，异步组件样式放进 @layer components，后者天然高于前者。
- 在全局入口 Sass 文件中统一声明：
@layer base, components, overrides;
- 所有基础重置、通用类写进
@layer base { ... } - 每个异步组件的 Sass 文件开头加：
@layer components { /* 组件样式 */ } - 注意检查最终输出的 CSS 是否保留了
@layer声明——老版 PostCSS 插件或未启用cssnano的构建流程可能直接删掉它
别信“导入顺序”，信选择器结构
试图靠 import './global.scss' 放最前、“赌”它先加载，是不可靠的。真正可控的是提升局部选择器的特异性：
立即学习“前端免费学习笔记（深入）”；
- 给异步组件根元素加唯一 class，比如
<div class="async-modal-root"> <li>在组件 Sass 里用 <code>.async-modal-root .modal-header，而不是单纯.modal-header - 避免
div .modal-header这种无意义标签选择器，它不提权还拖慢渲染 - 如果组件已用 BEM，直接用
.async-modal__header—— 类名唯一性比嵌套层数更有效 - 不要在异步组件里
@use 'ant-design-vue/dist/reset.css'—— 它会把全局规则再塞一遍 - 用 wrapper 容器切断影响：
<div class="my-async-wrapper"><el-button></el-button></div>，再写.my-async-wrapper .el-button { ... } - 如果必须复用第三方 class，优先走 CSS 变量定制（如
--el-color-primary），而不是覆盖样式 - 检查 DevTools 的 “Computed” 面板，确认目标元素的
z-index、color等属性来源，别被表面 class 名骗了
警惕第三方样式穿透进异步组件
像 Ant Design 的 .ant-btn、Element Plus 的 .el-input 这类全局类，会直接匹配异步组件内的 DOM，根本不管你是不是异步加载的。这时：
最易被忽略的点是：异步组件的样式文件是否真的被编译进了对应 chunk，还是被 Vite 的 CSS 提取逻辑误判为“全局”合并到了主包里——查构建产物中的 .css 文件，确认组件样式有没有独立 chunk，否则一切提权都白搭。
