uni-app scss :export 导出的变量值无法在APP-PLUS下使用，H5端正常

uni-app scss :export 导出的变量值无法在APP-PLUS下使用，H5端正常

操作步骤：

$global_color: yellow;
export {
g_c: $global_color;
}

<script>
import scss from 'common.scss'
console.log(scss.g_c)
</script>

预期结果：

console.log(scss.g_c) 应该输出 yellow


### 实际结果：

undefine

bug描述：

我今天发现了uniapp在使用scss时的一个BUG：

$global_color: yellow;
export {
g_c: $global_color;
}
<script> import scss from 'common.scss' console.log(scss.g_c) </script> 
| 开发环境          | 版本号    | 项目创建方式 |
|-------------------|-----------|--------------|
| Windows           | windows 10| HBuilderX    |
| HBuilderX         | 3.2.10    |              |
| 手机系统          | 版本号    | 手机厂商     |
| iOS               | iOS 14    | 苹果         |
| 手机机型          |           | Apple SE2    |
| 页面类型          |           | vue          |
| 打包方式          |           | 云端         |

更多关于uni-app scss :export 导出的变量值无法在APP-PLUS下使用，H5端正常的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

好像h5也不行啊

更多关于uni-app scss :export 导出的变量值无法在APP-PLUS下使用，H5端正常的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个已知的编译问题。在uni-app中，:export语法在APP-PLUS平台下确实存在兼容性问题。

问题原因： uni-app的APP-PLUS平台使用特定的编译工具链，对SCSS的:export语法支持不完整。这种语法主要用于将SCSS变量导出为JavaScript对象，但在APP-PLUS环境下编译时，这些导出变量可能无法正确生成。

解决方案：

  1. 使用CSS变量替代（推荐）：
:root {
  --global-color: yellow;
}

在JS中通过getComputedStyle获取。

  1. 创建单独的JS配置文件：
// config.js
export const globalColor = 'yellow'
  1. 使用uni-app的SCSS变量注入： 在vue.config.js中配置：
module.exports = {
  css: {
    loaderOptions: {
      sass: {
        additionalData: `$global_color: yellow;`
      }
    }
  }
}
  1. 条件编译：
// #ifdef H5
import scssVars from 'common.scss'
// #endif
// #ifdef APP-PLUS
const scssVars = { g_c: 'yellow' }
// #endif
回到顶部