uni-app vue3使用renderjs引入css报错
uni-app vue3使用renderjs引入css报错
示例代码：
<script module="photo" lang="renderjs">
import "[@photo-sphere-viewer](/user/photo-sphere-viewer)/core/index.css";
</script>
操作步骤：
- 安装photo-sphere-viewer，引入css报错
预期结果：
- 正常打包
实际结果：
- 打包报错误
15:24:40.890 X [ERROR] Cannot import “E:/Code/TT/node_modules/@photo-sphere-viewer/core/index.css” into a JavaScript file without an output path configured
15:24:40.900 <stdin>:16:8:
15:24:40.907 16 │ import “@photo-sphere-viewer/core/index.css”;
15:24:40.946 ╵
15:24:40.962 [plugin:uni:app-vue-renderjs] Build failed with 1 error: 15:24:40.968 <stdin>:16:8: ERROR: Cannot import “E:/Code/TT/node_modules/@photo-sphere-viewer/core/index.css” into a JavaScript file without an output path configured
bug描述：
- vue3使用renderjs引入css报错，vue2不会报错可以正常使用
| 信息类别 | 描述 |
|------------------|----------------------------|
| 产品分类 | uniapp/App |
| PC开发环境 | Windows |
| PC开发环境版本号 | Windows 11 企业版 |
| HBuilderX类型 | 正式 |
| HBuilderX版本号 | 4.45 |
| 手机系统 | Android |
| 手机系统版本号 | Android 15 |
| 手机厂商 | vivo |
| 手机机型 | iqoonew8 |
| 页面类型 | vue |
| vue版本 | vue3 |
| 打包方式 | 云端 |
| 项目创建方式 | HBuilderX |
更多关于uni-app vue3使用renderjs引入css报错的实战教程也可以访问 https://www.itying.com/category-93-b0.html
2 回复
提供个复现工程，并且手动测试一下，把对应的 css 文件修改成相对路径引用。对比测试 vue2 和 vue3 是不是就一样了，缩小下问题范围，是不是相对路径的问题。
更多关于uni-app vue3使用renderjs引入css报错的实战教程也可以访问 https://www.itying.com/category-93-b0.html
这是uni-app在Vue3环境下使用renderjs引入CSS文件时的一个已知问题。在Vue3中，renderjs模块不支持直接导入CSS文件，这与Vue2的行为不同。
解决方案有以下几种：
- 将CSS文件改为在页面或组件的style标签中引入：
<style>
@import "@photo-sphere-viewer/core/index.css";
</style>
- 使用动态创建link标签的方式引入CSS：
<script module="photo" lang="renderjs">
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = require('@photo-sphere-viewer/core/index.css');
document.head.appendChild(link);
</script>