uni-app vue3云打包安卓app不成功，uni-popup插件样式报错

uni-app vue3云打包安卓app不成功，uni-popup插件样式报错

操作步骤：

  • 得删除style内的代码可以正常打包



### 预期结果：
- 正常打包成功

实际结果：

  • 打包报错



### bug描述：
- vue3云打包安卓app，报错内容来自插件“uni-popup 弹出层”，该插件代码正常运行是没有报错的，只在云打包的时候报错，报错问题如附件图片。 我把uni-popup-message.vue中的样式删除后才可以正常打包。 毕竟这是插件的内容，本人对scss也没学习过，所以报错BUG。
开发环境 版本号 项目创建方式
Windows 20H2 HBuilderX

Image Image


更多关于uni-app vue3云打包安卓app不成功，uni-popup插件样式报错的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app vue3云打包安卓app不成功，uni-popup插件样式报错的实战教程也可以访问 https://www.itying.com/category-93-b0.html


根据你提供的错误信息和图片，这个问题主要是由于 uni-popup 插件在 Vue3 环境下云打包时，Sass/SCSS 样式编译错误导致的。

具体错误是：

SassError: expected selector.

从错误堆栈看，问题出现在 uni-popup-message.vue 文件的第 43 行，具体是这一行样式代码：

/deep/ .uni-popup__message-box { ... }

问题原因分析：

  1. Vue3 中 /deep/ 选择器的兼容性问题：

    • 在 Vue3 中，/deep/ 深度选择器已被废弃
    • 应该使用 ::v-deep() 或 :deep() 替代
    • 云打包时使用的 Sass 编译器可能对废弃语法支持不完整

  2. 插件版本兼容性：

    • uni-popup 插件可能没有完全适配 Vue3 的样式穿透语法
    • 插件中的 SCSS 语法在云打包环境的编译器中可能不被支持

解决方案：

  1. 临时解决方案（你已发现）：

    • 删除 uni-popup-message.vue 中第 43 行附近的 /deep/ 相关样式代码
    • 但这会影响插件的样式表现

  2. 推荐解决方案：

    • 将 /deep/ 替换为 Vue3 支持的语法：
      // 替换前：
/deep/ .uni-popup__message-box { ... }

// 替换为：
:deep(.uni-popup__message-box) { ... }
或
::v-deep(.uni-popup__message-box) { ... }
回到顶部