uni-app CSS 在加了scoped后page选择器失效

uni-app CSS 在加了scoped后page选择器失效

开发环境 版本号 项目创建方式
Windows win10 HBuilderX

操作步骤：

<style lang="scss" scoped>

预期结果：

  • 样式生效

实际结果：

  • 样式未生效

bug描述：

不生效

<style lang="scss" scoped>  
page {  
    background: $bg-color-grey;  
    opacity: 0;  
}  
</style>

生效

<style lang="scss">  
page {  
    background: $bg-color-grey;  
    opacity: 0;  
}  
</style>

更多关于uni-app CSS 在加了scoped后page选择器失效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

9 回复

多写一个style标签

<style> page{ ..... } </style> <style lang="scss" scoped> 样式代码 </style>

更多关于uni-app CSS 在加了scoped后page选择器失效的实战教程也可以访问 https://www.itying.com/category-93-b0.html


正解

学到了

page 是其父节点，加了 scoped 自然失效

h5生效,但是app不生效,这样会导致不符合预期的情况发生

回复 天字第一号: 好的，后续会考虑以哪端为基准对齐

所以解决了没

所以解决了没

在uni-app中使用scoped样式时，page选择器确实会失效，这是设计上的限制。原因如下：

  1. scoped样式的工作原理是通过给组件元素添加data-v-xxx属性来实现样式隔离，但page是页面根节点，不属于组件内部元素，无法被添加data-v属性

  2. 解决方案有以下几种：

  • 移除scoped属性，直接使用全局样式
  • 将page样式写在App.vue的全局样式中
  • 使用/deep/或::v-deep穿透（但page节点特殊，可能不适用）
  1. 推荐做法： 对于page这样的全局页面样式，建议放在App.vue中统一管理，或者直接使用不加scoped的style标签

示例：

// App.vue
<style lang="scss">
page {
    background: $bg-color-grey;
}
</style>
回到顶部