uni-app vue3项目，uni.scss 中 :export 导出的数据不是对象而是字符串

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

示例代码：

// uni.scss
/* 行为相关颜色 */
$uni-color-primary: #007aff;
:export{
test: $uni-color-primary;
}

// index.vue

import uniScss from “@/uni.scss”
console.log(uniScss)


## 操作步骤：

- 新建空白vue3项目


// uni.scss  
/* 行为相关颜色 */  
$uni-color-primary: #007aff;  
:export{  
    test: $uni-color-primary;  
}  

// index.vue  

import uniScss from "@/uni.scss"  
console.log(uniScss)

预期结果：

希望 uniScss 是对象

实际结果：

uniScss 返回的是字符串 :export {test: #007aff;} 现在返回的是两个一样的字符串了

:export {test: #007aff;}
:export {test: #007aff;}

yuanlaile 1楼•15 天前

感谢反馈，我使用你提供的复现工程，打印看不到结果，没有直接复现你的问题，通过查阅相关问题，提供下面几个方案，信息来自 vite 官方提到的链接 https://github.com/vitejs/vite/issues/1279
你可以使用 css 变量来实现css 和 js 中使用。或者你可以按照链接中提到的绕过方案，讲 .scss 改为 .module.scss 来实现 js 访问 scss 文件
经过测试，vue3 支持下面使用方式，可以正常打印结果。
main.js 文件： import uniScss from ‘./uni.module.scss’
console.log(uniScss)
console.log(uniScss.test) uni.moduel.scss 内容如下
:export {
test: #007aff;
} 我补充了演示工程，供你测试使用

yibo5220 2楼•15 天前

改成 uni.module.scss之后，预设的所有变量比如 $uni-color-primary: #007aff; 都不能用了，项目启动报错

htzhanglong 3楼•15 天前

回复西恩十月: 啥报错，我试了试可以用，我补充个复现工程，你试试吧

gougou168 4楼•15 天前作者

回复 DCloud_UNI_OttoJi: 复现工程中，是在需要的style标签里面额外写 @import “@/uni.module.scss”; 如果是uni.scss的话，是不需要额外import的

bupafengyu 5楼•15 天前

没人吗？这个问题百分百复现

songsunli 6楼•15 天前

请问最后怎么实现的

yuanlaile 7楼•15 天前

回复 l***@163.com: 参考我的评论试一试

wuwangju 8楼•15 天前

嗯，明白你的意思了，目前 vue2 和 vue3 有差异，vite 官方不会支持这个自动格式化的方案。uniapp 框架本身不会修改这个行为，他会破坏其他正常项目。
要解决你的问题，

你先使用我的提供方式，用 css modules
自己处理格式化 json。

我看 vue3 背后的 vite 是否还有绕过方案，通过 scss 添加自动导入等。

wuwangju 9楼•15 天前

在 uni-app 项目中，uni.scss 文件通常用于定义全局的样式变量。uni.scss 文件中的 :export 语法用于将 SCSS 变量导出为 JavaScript 可用的对象。然而，如果你发现导出的数据是字符串而不是对象，可能是由于以下原因：

1. 语法错误

确保 :export 的语法正确。正确的语法应该是：

:export {
  variableName: $variableValue;
}

例如：

$primary-color: #007bff;

:export {
  primaryColor: $primary-color;
}

2. 变量类型

确保你导出的变量是有效的 SCSS 变量，而不是字符串。如果你直接导出一个字符串，它会被当作字符串处理。

例如，以下代码会导出一个字符串：

:export {
  primaryColor: "#007bff";
}

而以下代码会导出一个变量值：

$primary-color: #007bff;

:export {
  primaryColor: $primary-color;
}

3. 使用方式

在 JavaScript 中，你可以通过 import 来使用导出的变量。确保你在 JavaScript 中正确地解析了导出的数据。

例如：

import styles from '@/uni.scss';

console.log(styles.primaryColor); // 应该输出 #007bff

4. 检查构建工具

确保你的构建工具（如 webpack 或 vite）正确配置了 SCSS 文件的解析。如果构建工具没有正确解析 :export，可能会导致导出的数据是字符串而不是对象。

5. 使用 `sass-loader`

如果你使用的是 webpack，确保你安装了 sass-loader 并且配置正确。sass-loader 负责将 SCSS 文件转换为 CSS，并处理 :export 语法。

示例代码

uni.scss 文件：

$primary-color: #007bff;

:export {
  primaryColor: $primary-color;
}

在 Vue 组件中使用：

<template>
  <div :style="{ color: primaryColor }">
    This text is colored with the primary color.
  </div>
</template>

<script>
import styles from '@/uni.scss';

export default {
  data() {
    return {
      primaryColor: styles.primaryColor,
    };
  },
};
</script>