使用scss时，通常都会有个var文件，里面存储一些变量，然后，其它scss里调用其中的变量，在vue中，可以挂载全局，然后，其它文件中，不需要再次引入var文件，即可使用var中变量，但在小程序中，需要在引用的scss文件中，引入var文件才行。那么，如果有几十个scss文件需要引用var中变量，就需要引入几十次var文件，在编译的时候，会不会把var文件编译几十次？开发的时候，也比较麻烦，不知道有没有解决方案，或官方什么时候能支持。
目前在app.scss中引入var文件，是没啥用的，还是需要在scss文件中引入var文件。
使用示例：
上面的方法，很麻烦。。
注释var引入后。
报错，但我在ui.scss中已经引入了，并把ui.scss引入到了app.scss中，还是报错，说明，并没有挂成功。
有没有大佬提供下方案，或官方后续支持一下该功能？
估计这就是微信小程序的特性（BUG），官方放任不管。
问：为何小程序中 scss 变量 app.scss 全局导入后在页面和组件中无法使用，需要局部导入，而vue中不会出现这种情况？
以下是通义千问的回答：
在微信小程序和Vue中，对于SCSS变量的全局导入和使用，存在差异的原因主要归结于两者不同的构建和处理机制：
### 微信小程序
1. **原生支持限制**：微信小程序原生并不直接支持SCSS或SASS。开发者通常需要借助第三方工具或构建流程（如webpack配合sass-loader）来编译SCSS为CSS，然后将CSS文件加入到小程序项目中。这个过程可能导致对全局变量的支持不够直接或透明。
2. **构建配置差异**：由于微信小程序的特殊性，构建配置需要特别设定来确保全局SCSS变量的可用性。例如，没有正确配置`style-resources-loader`或类似工具，可能使得全局变量不能自动注入到每一个组件的SCSS文件中。这就解释了为何有时需要在每个局部组件中手动导入变量文件。
3. **编译和加载顺序**：小程序的编译系统可能对全局资源的处理与Vue不同，它可能不会自动将全局变量合并到每个组件的样式中，除非明确指定或配置。
### Vue.js
1. **Webpack集成**：Vue.js项目通常使用Webpack作为构建工具，通过配置`vue-loader`和`sass-loader`等，可以方便地处理SCSS文件。`vue-cli`（Vue CLI）模板默认集成了对SCSS的支持，并且通过`style-resources-loader`等插件可以轻松实现全局SCSS变量的自动注入。
2. **预处理器配置**：Vue项目中，通过配置可以使得全局SCSS变量在每个组件的SCSS中自动可用，无需显式导入。这是因为Webpack的加载器配置允许在编译时注入全局样式资源到每个入口点，因此变量是全局可见的。
3. **组件设计哲学**：Vue的设计哲学鼓励组件化和复用，其构建工具链对此做了很好的支持，使得全局样式资源的管理更加方便，这也是Vue项目中较少遇到全局变量导入问题的原因。
综上所述，微信小程序和Vue.js在处理SCSS变量的全局导入和使用上的差异，主要源于各自的构建体系和原生支持度的不同。在微信小程序中，需要更细致地配置构建流程以实现全局变量的自动注入，而在Vue.js中，这一过程通常更为无缝，得益于其成熟的构建工具链和组件化设计。
sass 实现变量和导入的方式是编译时转换，不是基于 css 变量和import的封装！
小程序编译过程：scss -> wxss -> 类css（非标准的 css）
-> 小程序运行时环境
scss 实现变量的实际过程是通过将引用到 $ 的地方全部替换为 css 代码，再将原来定义 $ 的代码删除，如下：
// .sass
$color: #567;
button {
color: $color;
}
/* .css */
button {
color: #567;
}
同样地：scss 在 @import 一个文件时相当于在新文件复制粘贴，编译后的代码”通常“不会包含 @import
题主的代码结构（我理解的）：_var.scss -> ui.scss -> app.scss
假设 ：
# _var.scss：$color: #567;
# ui.scss：button { background-color: $color; }
# app.scss：@import 'ui.scss';
最终编译结果：
# app.wxss：button { background-color: #567; }
小程序会在每个页面加载时自动引入 app.wxss 但这是小程序运行时做的，而非 sass 编译器。编译组件 comp.scss 时，编译器并不知道存在 app.scss 文件，也不知道它们之间的联系，组件中访问 $color 变量自然就提示未定义了。
但是 vue-cli 基于 webpack 通过 style-resources-loader 实现了自动注入全局变量，便不会出现这种问题了。
没人回答一下嘛？
page {
--theme_color--primary:#567;
}
.comp {
var(--theme_color--primary)
}