@import不保证css输出顺序因其按依赖图重排而非源码顺序，交叉引用和构建工具会打乱顺序；应改用@use集中管控，并在单一入口文件中手动控制样式拼接。
为什么 @import 在 SCSS 里不保证 CSS 输出顺序
SCSS 的 @import 不是“插入文本”而是“合并作用域”，编译器会按依赖图重排，而非源码书写顺序。尤其当多个文件都 @import 同一个基础变量文件（比如 _variables.scss），或存在交叉引用时，Webpack + css-loader 可能进一步打乱最终注入顺序——你看到的 CSS 规则位置，其实是模块解析后的拓扑序，不是你写的顺序。
常见现象：.legacy_bundle 写在最前，却出现在生成 CSS 的中间；@import 'middle.css' 被插到两个 Sass 文件之间，但实际它本该在最后。
- 不要指望单个 SCSS 文件内
@import顺序 = 最终 CSS 规则顺序 - 纯 CSS 文件（如
middle.css）被@import时，Dart Sass 会尝试将其内容 inline 进来，但 Webpack 的style-loader可能把它当作独立模块异步注入，导致时序不可控 - 如果项目同时用
@use和@import，Dart Sass 会强制把所有@use提到最前，@import全部后置——这本身就会翻转你的预期顺序
用 @use 替代 @import 并显式控制拼接逻辑
@use 是 Dart Sass 推荐方式，它不自动拼接 CSS，只导入变量/函数/mixin，因此不会干扰样式输出顺序。真正决定 CSS 顺序的，是你把哪些规则写在哪个顶层文件里。
正确做法：把所有需要按序输出的样式规则，集中写在**一个入口 SCSS 文件**中，用 @use 加载依赖，再手动调用 @include 或直接写选择器。
- 入口文件（如
index.scss）不写任何@import，只写@use声明依赖 - 把
_some.scss、_other.scss改成只导出 mixin 或占位符（%base），不再直接输出 CSS - 在
index.scss中按需@include some-styles()或@extend %base，顺序由你控制 - 纯 CSS 文件（如
middle.css）不要@import，改用 Webpack 的asset/inline或单独import到 JS 中，由style-loader统一管理注入时机
Webpack 构建中 CSS 模块注入顺序失控怎么办
即使 SCSS 层面顺序正确，Webpack 的 mini-css-extract-plugin 或 style-loader 仍可能因 chunk 分割、异步加载、HMR 热更新等机制，让 CSS 模块注入 DOM 的顺序与打包顺序不一致。
- 检查
entry配置：确保所有样式入口只有一个，例如entry: { app: ['./src/index.js', './src/styles/index.scss'] }，避免多入口触发多个 style 标签 - 禁用
mini-css-extract-plugin的hmr选项（设为false），热更新时它会动态追加<style></style>标签，极易错位 - 若必须多入口，用
optimization.splitChunks.cacheGroups强制把所有 CSS 提取到同一 chunk，例如：cacheGroups: { styles: { name: 'styles', type: 'css/mini-extract', chunks: 'all', enforce: true } } - 上线前用
npm run build -- --stats=verbose查看生成的 CSS chunk 名称和依赖关系，确认是否真被拆散
调试 CSS 输出顺序的三个实操动作
别靠猜，用可验证的方式定位问题源头。
- 在每个 SCSS 文件顶部加
// === _some.scss ===注释，编译后搜索对应字符串，看它们在最终 CSS 中的物理位置 - 临时把
webpack.config.js中的mini-css-extract-plugin换成style-loader，观察浏览器 DOM 中<style></style>标签顺序是否符合预期——如果此时正常，说明是提取插件的 chunk 策略问题 - 运行
sass --no-source-map src/styles/index.scss > debug.css直接用 Dart Sass 编译，绕过 Webpack。如果debug.css顺序正确，那问题 100% 出在构建链路上，不是 SCSS 语法问题
真正难缠的是混合了 Webpack 多入口、动态 import()、CSS-in-JS 和传统 SCSS 的项目——这时候顺序不是“写在哪”，而是“谁先触发 inject”。得从 runtime 行为反推构建配置，不能只盯 SCSS 文件。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
