根本原因是@import残留导致Sass降级为legacy模式：只要存在任意@import，整个依赖链失效@use、命名空间消失，样式被强制inline到文件末尾；需全局清理@import、确保Dart Sass≥1.23.0、入口仅用@use且分量文件不输出CSS。
按需拆分 SCSS 文件后 CSS 顺序错乱，根本不是“拆分方式不对”，而是 @import 残留或模块系统降级导致 Sass 放弃顺序控制权——只要存在任意一处 @import，整个依赖链就退化为 legacy 模式，@use 失效、命名空间消失、样式被强制 inline 到文件末尾。
为什么删掉一行 @import 就能修复顺序
Sass 编译器对 @import 是零容忍的：哪怕只有一处 @import "reset" 或第三方库（如旧版 Bootstrap）残留，当前文件及其所有依赖都会被拖进 legacy 模式。此时：
-
@use "vars" as v不生效，v.$color-text报Undefined variable - 所有被
@import进来的样式直接 inline 到当前文件末尾，完全脱离你写的@use顺序 - Webpack 的
style-loader会把这部分 legacy 样式当作独立模块异步注入，DOM 中的标签位置不可控
如何定位并清理所有 @import 残留
别只搜主文件，要查整个依赖链——被 @import 的文件，哪怕它自己只写 @use，也会被拖进 legacy 模式：
- 全局搜索项目中所有
@import（包括单/双引号、带不带.scss、下划线前缀是否一致） - 重点检查：
node_modules中未升级的第三方库（如bootstrap@5.2）、vite.config.ts或vue.config.js里的sassOptions.additionalData是否偷偷注入了@import - 用
sass --version确认是 Dart Sass ≥ 1.23.0；node-sass已废弃，不支持@use，会直接报错而非警告
@use 正确组织样式的最小可行结构
真正控制 CSS 输出顺序的，不是导入语句本身，而是“哪些规则最终落在顶层入口文件里”：
- 入口文件（如
index.scss）只写@use，不写任何@import，也不直接写选择器 - 所有分量文件（
_button.scss、_card.scss）以_开头，只导出@mixin或占位符（%base），不输出任何 CSS 规则 - 在
index.scss中按需@include button-styles()或@extend %base，顺序由你手写决定 - 纯 CSS 文件（如
normalize.css）不要@import，改用或 Webpack 的asset/inline加载
Webpack 构建中 CSS 注入顺序仍错乱？检查这三个点
即使 SCSS 层面完全合规，构建工具仍可能打乱 DOM 中的样式标签顺序：
- 确保只有一个样式入口：
entry: { app: ['./src/index.js', './src/styles/index.scss'] }，避免多个import触发多个 - 禁用
mini-css-extract-plugin的hmr选项（设为false），热更新时动态追加的标签极易插队 - 若必须多入口，用
optimization.splitChunks.cacheGroups强制把所有 CSS 归入一个 chunk
最容易被忽略的是：你以为只是“拆分后顺序乱了”，其实问题早在第一行 @import 出现时就已注定——Sass 不会警告，也不会降级提示，它只是默默放弃所有模块化保障，把控制权交还给不可靠的构建时序。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
