@use在css中根本不会生效，因其仅为sass编译阶段语法，最终css文件中绝不存在；失效主因是构建未识别scss（如lang="scss"缺失）、文件名未以下划线开头、@use未置顶、混用@import导致整文件降级为legacy模式。
@use在CSS中根本不会生效
SCSS 的 @use 是 Sass 编译器的语法，只存在于 .scss 文件编译阶段，**不可能出现在最终输出的 CSS 文件里**。如果你在浏览器开发者工具里看到 CSS 源码中写了 @use，说明它没被编译——要么文件后缀不是 .scss，要么构建工具压根没走 Sass 处理流程。
Vue 单文件组件里
常见错误不是 @use 写错了，而是环境没识别成 SCSS：
-
lang="scss"缺失或拼错（比如写成lang="sass"或漏掉）→ Vite / Vue CLI 当作纯 CSS 处理，@use原样输出，不报错但无效 -
scoped不影响变量可用性，但若同时用了module，Vite 会优先启用 CSS Modules，SCSS 预处理被跳过 - IDE 自动格式化删掉了
@use末尾分号，Sass 编译器静默忽略整行，不报错也不注入 - HMR 缓存未刷新：改了
_variables.scss，但已打开的组件<style></style>块没重载，变量仍是旧值
@use路径能解析但变量仍 undefined
路径通不代表作用域通。关键检查点：
- 被
@use的文件名**必须以下划线开头**，如_variables.scss；写成variables.scss会被 Sass 拒绝为模块 -
@use必须在文件最顶部，不能包裹在@media、@mixin或选择器内部 - 混用了
@import：哪怕只有一处@import "reset"，整个文件立刻降级为 legacy 模式，所有@use失效 - 路径别名未生效：
@use "@/styles/_variables"中的@/需构建工具支持，否则按字面路径找，报错或静默失败
为什么 additionalData 配了 @use 还是用不了变量
配置只是字符串插入，不改变模块上下文：
- 写
additionalData: '@use "@/styles/_variables" as *;'，但_variables.scss内部用了@use "sass:math"→as *无法穿透嵌套模块 - 配置写成
@use "@/styles/_variables.scss"（带扩展名）→ Sass 可能拒绝识别，尤其在 Vite 中路径解析更严格 - 第三方库（如未升级的 Bootstrap）在
node_modules里含@import，它被引入时会拖垮整个依赖链，使你的文件也进入 legacy 模式
真正容易被忽略的点：Sass 模块系统没有“全局变量”概念，@use 的行为是确定性的、不可绕过的。你看到的“失效”，几乎总是某处悄悄退回到了 @import 时代，而不是配置本身有问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
