uni-app vue2版本的scss变量一直提示不存在

uni-app vue2版本的scss变量一直提示不存在

示例代码：

<style scoped lang="scss">
.title {
font-size: 36rpx;
color: $uni-primary-color;
}
</style>

操作步骤：

在vue2版本的uniapp项目中使用color: $uni-primary-color;方法引用scss变量

预期结果：

正常获取scss变量值

实际结果：

提示变量不存在

bug描述：

同样的方法使用uni内置变量，vue3一切正常，但是vue2提示：如果您希望继续使用node-sass,您可以在 manifest.json 中配置 "sassImplementationName":"node-sass"，于是去配置了node-sass，重启项目，还是一直提示变量不存在。

开发环境 版本号 项目创建方式
Windows WIN11 HBuilderX
HBuilderX 4.76

image


更多关于uni-app vue2版本的scss变量一直提示不存在的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

是不是没有在 uni.scss 中定义这个变量呢？

更多关于uni-app vue2版本的scss变量一直提示不存在的实战教程也可以访问 https://www.itying.com/category-93-b0.html


哦哦，原来变量名是$uni-color-primary;确实写错了

在 uni-app Vue2 项目中，SCSS 变量无法识别通常是由于缺少全局变量文件引入或配置问题导致的。以下是解决方案：

  1. 检查 uni.scss 文件
    确保项目根目录存在 uni.scss 文件，并已定义 $uni-primary-color 变量：

    $uni-primary-color: #007AFF;

  2. 在页面中显式引入全局变量
    在 <style> 块顶部添加以下代码：

    <style scoped lang="scss">
[@import](/user/import) '@/common/uni.scss'; // 根据实际路径调整
.title {
  color: $uni-primary-color;
}
</style>

  3. 检查 HBuilderX 配置

    • 在 manifest.json 中确认已启用 SCSS 支持：
      "sass": {
  "implementation": "node-sass"
}
    • 重启 HBuilderX 并清理项目缓存（菜单栏：运行 -> 清理项目缓存）。

  4. 验证 SCSS 实现方式
    如果使用 node-sass 仍无效，可尝试切换为 sass（Dart Sass）：

    "sass": {
  "implementation": "sass"
}
回到顶部