唯一稳定方式是通过构建配置自动注入：vite 模式下在 vite.config.ts 的 css.preprocessoroptions.scss.additionaldata 中添加 @use "@/styles/variables.scss" as *;，确保变量全局可用。
直接在 <style lang="scss"></style> 里写 SCSS 语法是可行的，但变量、混合宏、函数跨文件不可用——这不是写法错，而是 uni-app 默认没做全局注入。
为什么 @import 在某些 .vue 文件里不生效
常见错误现象：$primary-color 报错 “Undefined variable”，哪怕你已经在某个 variables.scss 里定义了它。
-
@import只对当前<style></style>块有效，不会“泄漏”到其他组件，哪怕它们都写了@import - HBuilderX 内置的 sass-loader 版本较旧，
@import已被官方标记为 deprecated，部分路径别名（如@/styles/vars.scss）解析失败 - 如果项目是 uni-app 3.0+（Vite 模式），
vue.config.js根本不生效，必须改用vite.config.ts
如何让 $color-primary 等变量在所有 <style lang="scss"></style> 中直接使用
唯一稳定的方式：通过构建配置把变量自动注入每个 SCSS 块开头。
- Vite 模式（uni-app 3.0+）：编辑
vite.config.ts，添加css.preprocessorOptions.scss.additionalData - 内容必须是字符串，且末尾带分号：
`@use "@/styles/variables.scss" as *;` -
as *是关键——它把variables.scss里的所有变量、函数、混合宏平铺导入，否则仅@use "@/styles/variables.scss"不会自动暴露成员 - 确保
variables.scss文件真实存在，且路径别名@/能被 Vite 正确解析（推荐放src/styles/variables.scss）
`// vite.config.ts
import { defineConfig } from 'vite'
export default defineConfig({
css: {
preprocessorOptions: {
scss: {
additionalData: `@use "@/styles/variables.scss" as *;`
}
}
}
})`
用 @use 替代 @import 的实际写法差异
如果你不想配构建项，又想局部复用变量，@use 是更现代、更可控的选择。
- 错误写法：
@use "@/styles/variables.scss";→ 变量仍不可见，需写variables.$primary-color - 正确写法：
@use "@/styles/variables.scss" as *;→ 直接用$primary-color - 混合宏同理：
@use "@/styles/mixins.scss" as *;后可直接调用@include flex-center; - 注意：不能在
<style scoped></style>外部用@use，它必须出现在<style lang="scss"></style>的最顶部
真正容易被忽略的是：即便配置了 additionalData，如果 variables.scss 里用了 @forward 或嵌套 @use 引入其他文件，而那些路径在 HBuilderX 下解析异常，变量依然为空——建议先用相对路径（如 ../styles/variables.scss）临时验证是否是别名问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
