// uni.scss
/* 行为相关颜色 */
$uni-color-primary: #007aff;
:export{
test: $uni-color-primary;
}
// index.vue
import uniScss from "@/uni.scss"
console.log(uniScss)
西恩十月
- 发布：2023-11-06 14:32
- 更新：2024-09-06 15:14
- 阅读：656
产品分类： uniapp/H5
PC开发环境操作系统： Windows
PC开发环境操作系统版本号： win10
HBuilderX类型： 正式
HBuilderX版本号： 3.96
浏览器平台： Chrome
浏览器版本： HBuilderX内置浏览器
项目创建方式： HBuilderX
示例代码：
操作步骤：
新建空白vue3项目
// 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 是对象
实际结果：
uniScss 返回的是字符串 :export {test: #007aff;}
现在返回的是两个一样的字符串了
:export {test: #007aff;}
:export {test: #007aff;}
uniScss 返回的是字符串 :export {test: #007aff;}
现在返回的是两个一样的字符串了
:export {test: #007aff;}
:export {test: #007aff;} bug描述：
在新建的空白 vue3 项目中的uni.scss 新增 :export {test: #007aff;}；
然后在页面上 import uniScss from "@/uni.scss"
打印出来的uniScss是 一堆注释 加上 :export {test: #007aff;} 的字符串，不能像vue2一样直接当作对象来用。
不止是HBuilderX新建的vue3工程，通过cli创建的vue3 工程也是这样。
最佳回复
DCloud_UNI_OttoJi - 日常回复 uni-app/x 问题，如果艾特我没看到，请主动私信
感谢反馈，我使用你提供的复现工程，打印看不到结果，没有直接复现你的问题，通过查阅相关问题，提供下面几个方案，信息来自 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;
}我补充了演示工程，供你测试使用
DCloud_UNI_OttoJi - 日常回复 uni-app/x 问题，如果艾特我没看到，请主动私信
嗯，明白你的意思了，目前 vue2 和 vue3 有差异，vite 官方不会支持这个自动格式化的方案。uniapp 框架本身不会修改这个行为，他会破坏其他正常项目。
要解决你的问题，
- 你先使用我的提供方式，用 css modules
- 自己处理格式化 json。
我看 vue3 背后的 vite 是否还有绕过方案，通过 scss 添加自动导入等。
西恩十月 (作者)
改成 uni.module.scss之后，预设的所有 变量比如 $uni-color-primary: #007aff; 都不能用了，项目启动报错
2024-09-06 10:46
DCloud_UNI_OttoJi
回复 西恩十月: 啥报错，我试了试可以用，我补充个复现工程，你试试吧
2024-09-06 11:19
西恩十月 (作者)
回复 DCloud_UNI_OttoJi: 复现工程中，是在需要的style标签里面额外写 @import "@/uni.module.scss"; 如果是uni.scss的话，是不需要额外import的
2024-09-06 13:56