uniapp编译失败时遇到/deep/报错如何解决

在uniapp项目编译时遇到报错："[SassError: /deep/ is not allowed in plain CSS.]"，应该如何处理？项目中使用了/deep/语法来实现组件样式穿透，但编译失败。请问在uniapp中有什么替代方案？是否需要配置特定的loader或修改编译选项？

2 回复

将 /deep/ 替换为 ::v-deep 即可解决。这是 Vue 3 的语法更新，uniapp 已不再支持旧写法。


在 UniApp 中，编译失败并遇到 /deep/ 报错通常是因为 Vue 3 不再支持 /deep/ 深度选择器语法，而 UniApp 默认使用 Vue 3 进行编译。以下是解决方案：

1. 替换为 ::v-deep

将样式中的 /deep/ 替换为 ::v-deep（Vue 3 推荐语法）：

/* 原代码 */
/deep/ .child-element {
  color: red;
}

/* 修改后 */
::v-deep .child-element {
  color: red;
}

2. 检查 UniApp 配置

  • 确认项目使用的是 Vue 3（检查 manifest.json 中是否配置 "vueVersion": "3"）。
  • 如果必须使用 Vue 2，可在 manifest.json 中显式指定：
    {
  "vueVersion": "2"
}

3. 全局样式处理

若在全局样式文件（如 App.vue）中使用 /deep/，同样需替换为 ::v-deep。

4. 注意事项

  • ::v-deep 必须与 SCSS 或 CSS 一起使用，确保预处理器正确配置。
  • 部分旧项目升级时，需全面检查并替换所有 /deep/ 语法。

通过以上调整，可解决编译报错问题。如果问题持续，检查控制台错误日志以获取更详细的线索。

回到顶部