1***@qq.com
1***@qq.com
  • 发布:2025-12-18 18:58
  • 更新:2025-12-18 19:05
  • 阅读:29

【报Bug】小红书小程序样式隔离问题

分类:uni-app

产品分类: uniapp/小程序/小红书

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: window10

HBuilderX类型: 正式

HBuilderX版本号: 4.87

第三方开发者工具版本号: 2.8.1

基础库版本号: 3.135.0

项目创建方式: HBuilderX

示例代码:

使用:
<ouyang />

ouyang.vue 代码:

<template>  
  <view class="ouyang">  
    123  
    <xinghua />  
  </view>  
</template>  

<script>  
import xinghua from './xinghua.vue'  

export default {  
  name: 'ouyang',  
  options: {  
    styleIsolation: 'shared'  
  },  
  components: {  
    xinghua  
  }  
}  
</script>  

<style lang="scss" scoped>  
.ouyang {  
  color: red;  
  ::v-deep {  
    .xinghua {  
      color: red;  
    }  
  }  
}  
</style>  
<template>  
  <view class="xinghua">  
    456  
  </view>  
</template>  

<script>  
export default {  
  name: 'xinghua'  
}  
</script>  

<style lang="scss" scoped>  
.xinghua {  
  color: green;  
}  
</style>  

::v-deep {
.xinghua {
color: red;
}
}
这里的代码并没有生效,而我在打包后的json里面加上 "styleIsolation": "shared" 就能生效了

操作步骤:

使用我上门的代码示例就能复现

预期结果:

我在组件里面添加
options: {
styleIsolation: 'shared'
},

打包后会自动加到 json里面去,或者不加也行,但是起码要能够在配置了某些配置项之后,组件之间的样式可以随意更改

实际结果:

如上

bug描述:

我在组件代码里面添加 options: {
styleIsolation: 'shared'
}
但是构建之后并没有生效,不能修改到组件里面的样式。

但是我到打包后的文件里手动添加配置后,发现样式就生效了。打包的时候应该是没有将源代码里面的styleIsolation: 'shared' 添加到json配置里面去。

2025-12-18 18:58 负责人:无 分享
已邀请:
Ask小助手

Ask小助手

该bug反馈内容基本完整,包含标题、描述、代码示例、复现步骤等要素,但缺少关键细节:未说明组件存放位置(是否在wxcomponents目录)、小红书小程序基础库版本及是否使用Vue组件而非小程序组件。

经核查知识库,styleIsolation是uni-app 3.99+新增特性,但仅明确支持微信小程序和支付宝小程序(微信小程序文档)。小红书小程序未在官方支持列表中,且知识库强调"小程序组件需放在wxcomponents等特殊目录"(manifest.json配置)。

问题本质是概念混淆:

  1. Vue组件应通过scoped属性实现样式隔离,而非styleIsolation
  2. styleIsolation仅适用于小程序组件,且需在pages.json全局配置
  3. 用户手动修改打包后json生效,说明其误将Vue组件当作小程序组件处理

建议解决方案:

  • 若需修改子组件样式,Vue组件应使用::v-deep(已正确使用但受限于组件类型)
  • 确认组件存放位置:Vue组件放components目录,小程序组件放wxcomponents目录
  • 小程序平台需检查基础库版本是否支持该特性
  • 参考uni-app组件规范确认配置方式

此非真正bug,属平台特性理解偏差。

内容为 AI 生成,仅供参考
DCloud_UNI_JBB

DCloud_UNI_JBB

  • 1***@qq.com (作者)

    但我现在是使用hbulider的方式构建,这个方法不是很适用,还有其他办法嘛

    2025-12-18 19:20

  • DCloud_UNI_JBB

    回复 1***@qq.com: 有啥不适用的,新建个package.json,安装一下依赖就行了,目前暂时没其他解决方案,你可以自己写脚本修改

    2025-12-18 19:33

要回复问题请先登录注册