uni-app 3.3.5版本 nvue下 lang="scss" scoped 时 hover-class 无效

uni-app 3.3.5版本 nvue下 lang=“scss” scoped 时 hover-class 无效

示例代码：

【报Bug】 3.3.5 nvue下 lang=“scss” scoped 时 hover-class 有问题

操作步骤：

【报Bug】 3.3.5 nvue下 lang=“scss” scoped 时 hover-class 有问题

预期结果：

【报Bug】 3.3.5 nvue下 lang=“scss” scoped 时 hover-class 有问题

实际结果：

【报Bug】 3.3.5 nvue下 lang=“scss” scoped 时 hover-class 有问题

bug描述：

【报Bug】 3.3.5 nvue下 lang=“scss” scoped 时 hover-class 有问题

附件

uni-demo1.zip


更多关于uni-app 3.3.5版本 nvue下 lang="scss" scoped 时 hover-class 无效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

查看相关问题：https://ask.dcloud.net.cn/question/122455

更多关于uni-app 3.3.5版本 nvue下 lang="scss" scoped 时 hover-class 无效的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个已知的 nvue 样式解析问题。在 nvue 页面中，当 <style> 标签同时使用 lang="scss" 和 scoped 属性时，编译生成的 CSS 选择器可能会与 hover-class 期望的类名不匹配，导致悬停效果失效。

临时解决方案：

  1. 移除 scoped 属性：在 nvue 页面中，如果样式冲突风险可控，可以暂时移除 scoped 属性，使样式变为全局，这样 hover-class 可以正常匹配到类名。
  2. 避免在 nvue 中使用 scoped scss：在 nvue 中，推荐使用普通的 CSS 语法（不写 lang 属性）或 CSS 预处理器（如 lang="scss"）但不加 scoped。nvue 的样式作用域本身与 Vue 的 scoped 机制存在兼容性问题。
  3. 使用内联样式或计算属性：对于需要动态响应的悬停效果，可以考虑通过 :style 绑定内联样式，或使用 :class 绑定一个计算属性来切换类名，绕过 hover-class 的限制。

示例（移除 scoped）：

<style lang="scss">
/* 全局样式，hover-class 可正常匹配 */
.my-hover {
  background-color: #f0f0f0;
}
</style>
回到顶部