SCSS中@import不按源码顺序插入，而是按依赖图拓扑序重排，导致实际CSS输出顺序与书写顺序不一致；混用@use和@import会使整个文件降级为legacy模式，@use失效、命名空间丢失、样式拼接失控，必须全局清理所有@import残留并统一使用@use+单一入口控制样式顺序。
SCSS里@import不是“按顺序插入”，而是“按依赖图重排”
你写的
@import 'base.scss'; @import 'button.scss';</p> <p>并不等于最终 CSS 里 <code>base.scss的规则一定在
button.scss 前面。Dart Sass 编译器会把所有 @import 当作模块依赖来解析，构建一个依赖图，然后按拓扑序输出——比如 button.scss 里也 @import 'base.scss'，那 base.scss 就会被提到最前，哪怕你写在后面。
常见现象：
-
.reset规则本该最先加载，却出现在生成 CSS 中间 - 多个文件都
@import '_variables.scss'，结果变量生效了，但样式块被拆散、错位 - 混入纯 CSS 文件（如
@import 'normalize.css'），它可能被 inline 到某个 SCSS 文件末尾，而不是你期望的头部
混用@use和@import会让整个文件降级为legacy模式
Sass 对 @import 是零容忍的：只要文件里出现任意一处 @import（哪怕只有一行、哪怕来自第三方库），整份文件及其所有依赖链都会退化为扁平作用域，@use 全部失效，命名空间丢失，样式拼接逻辑崩坏。
立即学习“前端免费学习笔记（深入）”；
典型后果：
-
@use 'mixins' as m;不生效，m.button-styles()报Undefined mixin - 所有被
@import进来的样式直接 inline 到当前文件末尾，完全脱离你写的@use顺序 - Webpack 的
style-loader把这部分 legacy 样式当作独立模块异步注入，<style>标签位置不可控
排查重点：
- 全局搜索项目中所有
@import，包括node_modules里的第三方包（如bootstrap@5.2） - 检查构建配置，比如
vite.config.ts中sassOptions.additionalData是否偷偷注入了@import - 确认
sass --version是 Dart Sass ≥ 1.23.0；LibSass 已废弃，不支持@use
Webpack 构建时多个
即使 SCSS 层面完全合规，style-loader 在开发环境动态注入 <style> 标签，或 mini-css-extract-plugin 在生产环境分割 chunk，都可能导致 DOM 中样式标签顺序与你写的导入顺序不一致。
关键影响点：
- 多个入口文件分别
import './a.scss'和import './b.scss'→ 生成两个独立<style>标签，加载顺序由 JS 执行顺序决定，不可靠 -
mini-css-extract-plugin开启hmr: true（默认）时，热更新会追加新<style>标签，极易插队 - React/Vue 组件内
import './Component.module.scss'和全局import '@/styles/index.scss'混用，两者注入时机不同步
实操建议：
- 确保只有一个样式入口：
entry: { app: ['./src/index.js', './src/styles/index.scss'] } - 禁用
mini-css-extract-plugin的hmr选项（设为false） - 避免在组件内部 import 全局样式文件；全局样式统一走主入口
外部顺序和构建工具注入顺序是两套逻辑，别混在一起想
很多人试图用 HTML 中 <link rel="stylesheet"> 的顺序去“修正” Webpack 打包后的 CSS 错乱，这是无效的——如果样式是通过 style-loader 动态注入的，HTML 里的 <link> 根本不参与这个流程；如果用了 mini-css-extract-plugin，它输出的是单个 CSS 文件，<link> 只控制这个文件的加载时机，不控制内部规则顺序。
真正要盯住的只有三点：
- SCSS 源码是否只用
@use，且所有样式规则只出现在**单一顶层入口文件**中 - Webpack 配置是否确保所有样式资源被收敛到同一个 chunk，不被 split 或异步加载
- 运行时 DOM 中是否只存在一个
<style>标签（开发）或一个<link>（生产）
最容易被忽略的是：你以为改好了 SCSS，但 node_modules 里某个未升级的 UI 库仍在用 @import，它会把你整个样式体系拖回 legacy 模式。这不是配置问题，是依赖污染。
