最确定原因是@import与@use混用致sass降级为legacy模式：任意@import（含node_modules或配置中）均使整文件@use失效、命名空间丢失、样式强制inline，顺序彻底失控。
先确认是不是@import混用导致的降级
SCSS生成CSS顺序错乱，最常见、最确定的原因就是项目里混用了@use和@import。Dart Sass一旦检测到任意一处@import（哪怕在node_modules里、哪怕被注释了），整份文件立刻退化为legacy模式：@use失效、命名空间丢失、所有样式被强制inline到导入点——你写的顺序完全作废。
排查方法：
- 全局搜索
@import，包括vue.config.js、vite.config.js里的sassOptions.additionalData或css.preprocessorOptions.sass.additionalData - 检查第三方库（如
bootstrap@5.2或旧版uview）是否在内部用了@import；可用npm ls bootstrap确认版本，≥5.3才默认支持@use - 运行
sass --version，确保是Dart Sass ≥ 1.23.0；LibSass已废弃，不支持@use，会直接报错而非警告
检查入口文件是否只做“拼接”，不直接输出样式
真正控制最终CSS规则顺序的，不是@use语句本身，而是哪些选择器最终落在顶层入口文件（如index.scss）里。如果组件文件（如_button.scss）自己就写了.btn { }，那它会在被@use时立即产出CSS，位置由编译器决定，不受你控制。
正确结构应满足：
- 所有带下划线的partial文件（
_button.scss、_mixins.scss）只导出@mixin、%placeholder或变量，不写任何顶层选择器 - 入口文件（
index.scss）只含@use声明，然后手动@include button-styles()或@extend %reset - 纯CSS文件（如
normalize.css）不要@import，改用<link rel="stylesheet">或Webpack的asset/inline加载
嵌套@media是否被误当成“顺序锚点”
在.card { @media (min-width: 768px) { &__title { } } }这类写法中，@media块的输出位置取决于父选择器在AST中的位置，而不是你希望它出现在CSS里的逻辑顺序。更危险的是：它会让选择器权重飙升（比如变成.layout .dashboard .card__title），间接导致后续样式被覆盖，你以为是顺序问题，其实是权重失控。
可靠做法是：
- 删掉所有组件文件里的嵌套
@media - 在入口
index.scss顶层统一书写@media块，按min-width从小到大排列 - 断点值用变量（
$breakpoint-md）+@mixin封装，避免硬编码和重复 - 交互状态（如
:hover）不要塞进@media里，拆成独立顶层规则
构建工具是否在DOM里插队注入
即使SCSS层面完全合规，Webpack/Vite仍可能让多个<style></style>标签注入顺序错乱。典型表现是：开发者工具里看到两个<style></style>标签，但后者的内容却覆盖了前者定义的变量或重置规则。
关键检查点：
- 入口配置是否唯一：
entry: { app: ['./src/index.js', './src/styles/index.scss'] }，避免import './styles/xxx.scss'分散在多个JS文件中 -
mini-css-extract-plugin的hmr选项是否设为false；热更新时动态追加的<style></style>极易插队 - 是否启用了
css-loader的modules模式？开启后每个模块样式会被隔离，@import或@use无法跨模块共享作用域
顺序问题本质是控制权让渡：你写了@use，不代表你就拿到了CSS输出顺序的控制权；只有把规则显式写在同一个顶层文件里，并切断所有@import路径，才能真正把顺序握在自己手里。最容易被忽略的，是那些藏在node_modules里、构建配置里、甚至package.json scripts里偷偷注入的@import。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
