在 uniapp 项目中，给 page 标签设置样式并添加 scoped 属性后，编译到微信小程序时样式不生效。核心原因在于：

• scope 的样式隔离机制：scoped 会让样式只作用于当前组件内的节点。
• uniapp 编译后 Page 标签结构变化：微信小程序将 page 作为根节点，scoped 样式无法穿透到根节点。

去掉 page 标签上的 scoped 属性，单独为 page 编写无隔离样式。

这样做是 uniapp 官方推荐的方式，不会影响页面内其他带 scoped 的样式隔离。

示例代码：

<template>
  <view class="content">
    <!-- 页面内容 -->
  </view>
</template>

<!-- page 的样式单独写，不加 scoped -->
<style>
page {
  background-color: #f5f5f5; /* 页面背景色 */
  color: #333; /* 全局文字色（子节点继承） */
  min-height: 100vh; /* 保证背景色铺满整个屏幕 */
}
</style>

<!-- 页面内其他样式正常加 scoped，不影响隔离 -->
<style scoped>
.content {
  padding: 20rpx;
}
</style>

如因项目规范要求所有样式必须加 scoped，可通过深度选择器穿透隔离，作用到 page 根节点。微信小程序兼容 /deep/ 和 ::v-deep，推荐使用 /deep/ 兼容性更好。

示例代码：

<template>
  <view class="content">
    <!-- 页面内容 -->
  </view>
</template>

<!-- 保留 scoped，用深度选择器穿透 -->
<style scoped>
/deep/ page {
  background-color: #f5f5f5;
  min-height: 100vh;
}
.content {
  padding: 20rpx;
}
</style>

1、必须加 min-height: 100vh

微信小程序的 page 节点默认高度为内容高度，内容较少时背景色只覆盖内容区域。加上 min-height: 100vh 可让背景色铺满整个屏幕。

2、避免多个 page 样式冲突

每个页面的 page 样式都是独立的（uniapp 编译后每个页面生成独立样式文件），不用担心不同页面的 page 样式互相覆盖。

3、全局页面样式设置

若需所有页面统一 page 背景色，可在 App.vue 的<style> 中编写（注意：App.vue 不要加 scoped）

<!-- App.vue -->
<script>
export default {
  onLaunch() {
    console.log('App Launch')
  }
}
</script>

<style>
/* 所有页面的 page 根节点通用样式 */
page {
  background-color: #f5f5f5;
  min-height: 100vh;
  font-size: 28rpx;
}
</style>

四、为什么 scoped 会导致 page 样式失效？

总结与最佳实践