混用@use和@import必然导致css顺序失控，因sass检测到任意@import即整文件降级为legacy模式，忽略所有@use、失效命名空间，并使样式拼接逻辑崩坏；删掉残留@import（含第三方库及构建配置中注入）即可恢复模块化行为与可控顺序。
为什么混用@use和@import会让CSS顺序彻底失控
不是“可能错乱”，而是编译器直接降级为 legacy 模式：只要文件里存在任意一处@import，整个文件及其所有依赖链都会被 Dart Sass 当作旧式扁平作用域处理。@use语句被完全忽略，命名空间失效，变量报Undefined variable，所有样式规则被无序 inline 到文件末尾——你写的顺序、@use的顺序、甚至@include的位置，全部作废。
如何快速定位并清除所有@import残留
别只查主入口文件，要扫完整依赖链：
- 全局搜索项目中所有
@import（含单/双引号、带不带.scss、下划线前缀是否一致） - 重点检查
node_modules里的第三方库——比如 Bootstrap 5.2 或更早版本自带@import，哪怕你没直接引用它，只要某个间接依赖加载了它，整条链就崩 - 检查构建配置：
vite.config.ts或vue.config.js中的sassOptions.additionalData可能偷偷注入了@import语句 - 运行
sass --version确认是 Dart Sass ≥ 1.23.0；LibSass 已废弃，不支持@use，会直接报错而非警告
@use组织样式的正确姿势：顺序由你手写决定
真正控制 CSS 输出顺序的，不是导入语句本身，而是“哪些规则最终落在顶层入口文件里”：
- 入口文件（如
index.scss）只写@use，不写任何@import，也不直接写选择器 - 所有分量文件（
_button.scss、_card.scss）以_开头，只导出@mixin或占位符（%base），不输出任何 CSS 规则 - 在
index.scss中按需@include button-styles()或@extend %base，顺序由你手写决定——先写@include header-styles()，后写@include footer-styles()，生成的 CSS 就严格按这个顺序排列 - 纯 CSS 文件（如
normalize.css）不要@import，改用<link rel="stylesheet">或 Webpack/Vite 的 asset 加载机制
Webpack/Vite 构建中仍出现顺序错位？检查注入时机
即使 SCSS 层面完全正确，构建工具也可能打乱 DOM 中的
- 确保只有一个样式入口，例如 Webpack 的
entry配置为{ app: ['./src/index.js', './src/styles/index.scss'] }，避免多入口触发多个<style></style>标签 - Vite 用户注意：
css.preprocessorOptions.sass.additionalData必须是合法 Sass 语句，结尾带分号，例如@use "@/styles/vars.scss" as *;；漏掉分号会报expected ";" - Webpack 用户若用
mini-css-extract-plugin，禁用其hmr选项（设为false），否则热更新时动态追加
@import残留常藏在node_modules深处，且构建工具配置里的additionalData可能静默注入错误语法——这两处不清理干净，@use再规范也白搭。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
