浏览器只认最终HTML中<link>的物理顺序，组件库CSS覆盖自定义样式主因是其加载时机晚于业务样式；应严格按「重置→变量→组件库→业务样式」顺序排列<link>，禁用@import，通过构建工具配置确保UI库CSS chunk优先注入。
CSS顺序错乱不是打包“出错了”，而是你写的加载顺序在构建流程里被重排了——浏览器只认最终 HTML 中 <link> 的物理顺序，其他全是幻觉。
为什么组件库 CSS 总是盖掉你的样式
根本原因不是组件库本身有问题，而是它被引入的时机晚于你的自定义样式。比如你在 main.js 里这样写：
import Vue from 'vue' import App from './App.vue' import 'cube-ui/lib/style.css' // ← 这行在 App 后面
Webpack/Vite 会把这行转成一个独立的 CSS chunk，并插入到 HTML 的 <head> 末尾，天然晚于你通过 import './styles/index.scss' 打包进主 bundle 的样式。结果就是：你的规则先解析，组件库的后解析，同权重下后者胜出。
- Vue CLI、Vite、Webpack 默认都按 JS
import语句顺序决定 CSS chunk 插入位置 - UI 库的 CSS 文件（如
iview.css、element-plus/dist/index.css）通常没做 scope 隔离，选择器权重又高（比如.el-button），极易覆盖 - 如果你还用了
@import或@use混用，Dart Sass 会强制把所有@use提到最前、@import全部后置，进一步翻转预期
修复的关键：控制最终 HTML 里的 <link> 顺序
别在 JS 里拼顺序，直接干预生成的 HTML 结构。验证方式很简单：打开生产环境页面 → 查看源码 → 找 <link rel="stylesheet"> 标签，确认它们是否按「重置 → 变量 → 组件库 → 业务样式」排列。
立即学习“前端免费学习笔记（深入）”；
- 在 Vite 中，删掉
index.html里所有手动<link>，改用import语句统一控制，并确保 UI 库 CSS 在最顶部：import 'normalize.css' import 'element-plus/dist/index.css' import './styles/variables.css' import './styles/app.scss'
- 在 Webpack + MiniCssExtractPlugin 场景下，检查
optimization.splitChunks是否把 UI 库 CSS 单独拆成vendorchunk；如果是，需显式配置cacheGroups并设priority: 20确保它最先注入 - Laravel Mix 用户：禁用所有
mix.styles()，把 UI 库 CSS 全部@import进resources/css/app.css顶部，再只用mix.sass()编译单入口
容易被忽略的陷阱：CSS 文件内部的 @import
哪怕你外部 <link> 顺序全对，只要某个 CSS 文件（比如你自己的 page.css）里写了 @import "base.css"，浏览器就会等 page.css 下载完再发一次请求去拉 base.css，实际加载时间必然晚于同级其他 <link>。
- 禁止在任何已通过
<link>引入的 CSS 文件中使用@import - 如果必须复用基础样式，改用预处理器（Sass/Less）的
@use或@import（仅限编译时），确保它被 inline 进最终输出文件 - Webpack 用户务必确认
postcss-import插件已安装且启用，否则@import语句会被静默忽略，导致部分样式根本没进打包流程
真正难的不是调一次顺序，而是让这个顺序在开发服务器、CI 构建、CDN 部署、甚至热更新（HMR）时都稳定不变。每次改完，记得清缓存、硬刷新、查 Network 面板里 CSS 的 Initiator 列——那里才是真相所在。
