uni-app编译到QQ小程序组件内部CSS不生效

操作步骤：

编译后到QQ小程序打开，查看即可

预期结果：

组件内部的CSS生效

实际结果：

不生效
CSS名称重复出现

bug描述：

uniapp编译到QQ小程序后，组件内部的CSS无效：

<style scoped lang="scss">  
    .w-card-item {  
        background-color: #FFF;  
        padding: 20rpx;  

        .flex {  
            display: flex;  
        }  
}  
...

信息类别	详细信息
产品分类	uniapp/小程序/QQ
PC开发环境操作系统	Windows
PC开发环境操作系统版本号	win11
HBuilderX类型	正式
HBuilderX版本号	3.8.12
第三方开发者工具版本号	V0.70
基础库版本号	1.64.1
项目创建方式	HBuilderX

更多关于uni-app编译到QQ小程序组件内部CSS不生效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

eggper 1楼

更多关于uni-app编译到QQ小程序组件内部CSS不生效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

这个问题是由于QQ小程序对scoped样式支持不完善导致的。以下是具体原因和解决方案：

问题原因：

QQ小程序在编译时对scoped样式处理存在问题
生成的CSS选择器可能出现重复或无效
组件隔离机制与微信小程序存在差异

解决方案：

方法一：移除scoped属性

<style lang="scss">
/* 去掉scoped */
.w-card-item {
    background-color: #FFF;
    padding: 20rpx;
}
</style>

方法二：使用全局样式

在App.vue中定义公共样式
或创建单独的CSS文件引入

方法三：使用深度选择器

/deep/ .w-card-item {
    background-color: #FFF;
}