西恩十月
西恩十月
  • 发布:2023-11-06 14:32
  • 更新:2024-09-06 15:14
  • 阅读:587

【报Bug】vue3项目,uni.scss 中 :export 导出的数据不是对象而是字符串

分类:uni-app

产品分类: uniapp/H5

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: win10

HBuilderX类型: 正式

HBuilderX版本号: 3.96

浏览器平台: Chrome

浏览器版本: HBuilderX内置浏览器

项目创建方式: 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;}   

bug描述:

在新建的空白 vue3 项目中的uni.scss 新增 :export {test: #007aff;};
然后在页面上 import uniScss from "@/uni.scss"
打印出来的uniScss是 一堆注释 加上 :export {test: #007aff;} 的字符串,不能像vue2一样直接当作对象来用。

不止是HBuilderX新建的vue3工程,通过cli创建的vue3 工程也是这样。

2023-11-06 14:32 负责人:YUANRJ 分享
已邀请:

最佳回复

DCloud_UNI_OttoJi

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;  
}

我补充了演示工程,供你测试使用

  • 西恩十月 (作者)

    改成 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

西恩十月

西恩十月 (作者)

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

DCloud_UNI_OttoJi

DCloud_UNI_OttoJi - 日常回复 uni-app/x 问题,如果艾特我没看到,请主动私信

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

要解决你的问题,

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

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

要回复问题请先登录注册