如何修复CSS在小程序项目中SCSS变量无法共享的问题？-css教程-PHP中文网

小程序中scss变量“无法共享”主因是@use被编译链静默降级：需紧贴首行、禁用@import、配置additionaldata注入，并用#{$var}插值赋值css变量。

如何修复css在小程序项目中scss变量无法共享的问题？

小程序项目里 SCSS 变量“无法共享”，根本不是变量写错了，而是 @use 模块系统在 uni-app 或微信小程序编译链中被静默降级或注入失效——绝大多数情况，你写的变量其实一直都在，只是根本没被编译器识别为模块。

为什么 `@use` 在小程序里总报 `Undefined variable`

uni-app 编译小程序时，会把每个 .vue 文件的 <style lang="scss"></style> 单独处理，而 @use 的作用域仅限当前样式块。一旦该样式块顶部有空行、注释、@charset，甚至前面有 <template></template> 标签，@use 就直接失效；更常见的是，项目里某处混用了 @import（比如引入了旧版 NutUI 或 reset.css），整条编译链立刻退化为 legacy 模式，@use 被完全忽略。

@use 必须紧贴 <style></style> 开始标签后第一行，前面不能有任何字符（包括空格、// 注释、@charset）
路径必须是 @use "@/styles/_variables.scss" as *; 形式：文件名以下划线开头，as * 不可省略
全局搜索项目中所有 @import（含 node_modules 里的第三方库），删干净再试

uni-app 小程序必须用 `additionalData` 注入变量

手动在每个 <style></style> 里写 @use 不现实，也不可靠。uni-app（尤其 HBuilderX 或 CLI 构建）不支持 Vite 那套原生 css.preprocessorOptions.scss.additionalData，得走 vue.config.js 或 vue.config.ts 的 css.loaderOptions.sass.additionalData 配置，且字符串末尾必须带分号和换行。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

正确写法：additionalData: `@use "@/styles/_variables.scss" as *;\n`（反引号 + 显式 \n）
@/ 别名必须已在 configureWebpack 或 chainWebpack 中配置指向 src/，否则路径解析失败
_variables.scss 文件里禁止出现任何 CSS 规则（如 body { margin: 0 }），否则会被重复注入到每个页面样式中
验证方式：临时删掉 additionalData，在某个组件 <style></style> 顶部手写 @use "@/styles/_variables.scss" as *;，能用说明文件本身没问题

小程序端 CSS 变量（`--xxx`）无法继承怎么办

SCSS 变量（$primary-color）是编译期值，不能直接赋给 CSS 自定义属性；而小程序视图层不支持 :root 全局挂载，--primary-color 定义在 uni.scss 里，不会自动透传到每个页面节点。

必须用插值语法：--primary-color: #{$primary-color};，写成 --primary-color: $primary-color; 一定无效
若需在组件内覆盖第三方 UI 库变量（如 NutUI 的 --nut-searchbar-background），要用 ::v-deep 或 /deep/ 穿透并显式插值：::v-deep .nut-searchbar { --nut-searchbar-background: #{$primary-color}; }
避免在 JS 里读取 getComputedStyle 获取 SCSS 变量——它只返回最终计算后的 CSS 值，且小程序环境可能不支持

最易被忽略的一点：uni-app 的 additionalData 配置对 <style scoped></style> 和非 scoped 都生效，但如果你同时用了 lang="scss" 和 lang="sass"（无括号），Sass 编译器会按不同语法模式处理，导致变量注入失败。统一用 lang="scss"，别混用。