uni-app小程序中scoped样式失效是因底层不支持属性选择器，需启用兼容模式、规范::v-deep写法、避免styleIsolation冲突，并统一使用upx单位。
uni-app小程序编译后样式穿透失效
uni-app 默认开启 scoped 样式隔离，但小程序平台（尤其是微信、支付宝）的底层渲染机制不支持标准 Vue 的 data-v-xxx 属性选择器注入，导致 编译后失效，样式全局污染或丢失。
- 现象：H5 正常，小程序里组件样式“跑出去”了，或者子组件被父组件样式意外覆盖
- 本质原因：小程序 WXML 不支持属性选择器，uni-app 用 class 名哈希模拟 scoped，但父子组件 class 名哈希不一致，
::v-deep或/deep/在某些版本里被忽略或转义异常 - 临时绕过：把关键样式写在
（非 scoped），但会破坏组件封装性 - 推荐做法：显式启用
scoped的兼容模式 —— 在vue.config.js中配css: { extract: false }并确保h5和mp-weixin构建时都走 CSS-in-JS 注入路径（uni-app 3.0+ 默认已优化，但老项目需检查）
uni-app中scoped写法在小程序里不生效
不是写法错，是编译链路没对齐。uni-app 的 scoped 实际靠 postcss 插件 postcss-pxtorem 和 postcss-plugin-uni-app 重写选择器，而小程序端若未启用对应插件或 vue-loader 版本不匹配，就会跳过处理。
- 检查
vue.config.js是否存在configureWebpack.chainWebpack中误删了css.loaderOptions.postcss.plugins -
::v-deep .my-class在小程序里必须写成::v-deep(.my-class)（括号不能省），否则编译器直接丢弃整条规则 - 避免嵌套太深：
.a .b .c .d→ 小程序单个 class 名长度限制 + selector 匹配性能差，建议扁平化命名或用:deep()（Vue 3 语法，uni-app 3.1+ 支持） - 动态 class 绑定如
:class="['item', isActive ? 'active' : '']"，其生成的 class 不会被scoped哈希处理，需手动加前缀或改用style内联
微信小程序自定义组件里styleIsolation和uni-app冲突
uni-app 编译出的微信小程序代码，每个页面/组件目录下都有 json 配置。如果手动加了 "styleIsolation": "apply-shared" 或 "isolated"，会跟 uni-app 自己注入的 scoped class 逻辑打架，反而让样式更不可控。
- uni-app 项目中，**不要**在
pages.json或组件.json里配置styleIsolation - 真要隔离，优先用
+:deep()控制穿透范围，比原生styleIsolation更可控 - 若引入第三方微信原生组件（非 uni-app 封装），它内部用了
styleIsolation: isolated，那它的样式一定不会受你影响 —— 这是设计使然，不是 bug - 调试技巧：在微信开发者工具里 inspect 元素，看真实 class 名是否带
data-v-xxx；没有，说明 scoped 没参与编译，回查vue.config.js或package.json中@dcloudio/uni-cli-shared版本是否低于 3.0.0-alpha
uni-app多端样式统一但小程序仍错乱
错乱往往不是样式本身问题，而是单位、尺寸计算、flex 行为差异被放大。uni-app 的 upx 单位在小程序里转成 rpx，但某些场景（如 transform: scale()、border-width、font-size 嵌套继承）会导致像素对齐偏移。
- 避免在
scoped样式里混用px和upx，尤其 border、padding、margin 等影响盒模型的属性，全用upx -
flex: 1在小程序中可能不触发收缩，改用flex: 1 1 0显式声明 - 字体图标（如 iconfont）用 base64 或 uni-app 官方
uni-icons，别用字体文件 +@font-face，小程序对字体加载时机敏感 - 最稳妥的兜底：对关键布局容器加
width: 750rpx（全屏宽）或box-sizing: border-box，防止 padding/border 溢出
实际项目里最容易被忽略的是：scoped 生效依赖整个构建链路完整，哪怕只是升级了一个 postcss 插件，也可能让 data-v-xxx 注入失败。上线前务必在真机上用开发者工具逐层 inspect class 名。
