SCSS @import顺序错乱导致样式被意外覆盖，因Webpack/Vite按@import出现顺序拼接CSS，基础样式后引入则被覆盖；应将reset/variables等置于入口文件最顶部，禁用组件级重复@import，并确保变量含!important。
SCSS @import 顺序错乱导致样式被意外覆盖
SCSS 文件拆分后，@import 的物理顺序直接决定最终 CSS 规则的层叠顺序。Webpack/Vite 不会按文件路径排序，而是严格按 @import 出现的先后顺序拼接内容。一旦基础变量或重置样式（如 reset.scss）被后 @import，它就可能被前面已定义的规则覆盖。
常见错误现象：$primary 变量在组件里还是旧值；button 的 margin 没被重置；全局 body 字体没生效。
- 检查所有入口 SCSS 文件（如
main.scss或index.scss），确认@import 'base/reset';和@import 'base/variables';在最顶部 - 避免在组件级 SCSS 中
@import公共基础文件——这会导致重复引入、顺序不可控 - Vite 用户注意：
vite-plugin-sass-dts或unplugin-sass-export类插件若自动注入@import，需确认其插入位置是否破坏了你手动控制的顺序
同一变量被多次赋值且未用 !default 导致覆盖失效
SCSS 变量只有首次声明生效，后续同名 $var: value 赋值会被忽略——除非原始声明用了 !default。UI 组件库（如 Element Plus、Ant Design Vue）的变量大多带 !default，但你自己写的 variables.scss 若漏掉它，就会变成“只读”。
典型表现：改了 $--color-primary 却没生效；DevTools 里看到组件库的默认色值还在。
立即学习“前端免费学习笔记（深入）”；
- 检查变量源文件，确保所有可覆盖变量都以
$var: value !default;形式声明 - 不要在多个地方重复
@import 'variables'，尤其避免在组件 SCSS 里再导入一次——变量只应由主入口统一注入一次 - Element Plus 2.2.0+ 的变量路径已变，必须用
@use "element-plus/theme-chalk/src/common/var" as *;替代旧版@import，否则!default不起作用
scoped 样式 + ::v-deep 穿透时选择器权重不足
Vue 的 <style scoped> 会给元素加 data-v-xxx 属性，而 ::v-deep .el-button 生成的选择器实际是 [data-v-xxx] .el-button。如果组件库本身用了高权重选择器（如 .el-button.is-disabled:hover），你的穿透样式可能因权重低而被划掉。
错误写法：::v-deep .el-button { color: red; } → 权重太低，常被覆盖。
- 优先用
::v-deep .el-button.is-primary精准匹配目标状态类，提升权重 - 避免嵌套写法：
.my-form ::v-deep .el-button容易被 loader 丢前缀，统一放在顶层 - 如果组件用了
teleport（如<el-dialog>），::v-deep失效，必须改用全局样式或:global(.el-dialog)
构建产物中 CSS 文件加载顺序与 import 顺序不一致
本地开发时 style-loader 动态注入 <style>，顺序由 JS 执行时机决定；但生产环境打包后，CSS 通常被提取为独立 <link>，顺序取决于构建配置，不再受 JS import 控制。
典型现象：本地样式正常，线上布局偏移；DevTools 里看到 .bre-label-inner_container 和 .brand-item_discountTag__SlxDf 的 vertical-align 加载顺序颠倒。
- Webpack 用户检查
mini-css-extract-plugin配置，确保chunkFilename和filename不打散关键样式块 - Vite 用户在
vite.config.ts中启用build.rollupOptions.output.manualChunks，把基础样式（如base.css）单独抽成base.[hash].css并在 HTML 中<link rel="preload">提前加载 - 终极手段：在
index.html中显式控制<link>顺序，第三方库 → 基础样式 → 主题 → 页面级样式
真正容易被忽略的是：SCSS 拆分本身不引发问题，出问题的永远是「谁先被解析、谁先被注入、谁的权重更高」这三个隐性依赖。调试时别只盯变量名，要打开 DevTools 的 Styles 面板，看每条规则的来源文件和是否被划掉——那才是真实的层叠结果。
