uni-app nvue页面修改uni-app组件样式不生效
uni-app nvue页面修改uni-app组件样式不生效
操作步骤:
在nvue中需要修改 slider组件里的滑块样式,将样式写在App.vue中时,nvue页面不生效,vue页面是生效的。
预期结果:
在nvue中生效
实际结果:
在nvue中不生效
bug描述:
在nvue中需要修改 slider组件里的滑块样式,将样式写在App.vue中时,nvue页面不生效,vue页面是生效的。

| 信息类别 | 信息内容 |
|---|---|
| 产品分类 | uniapp/App |
| PC开发环境 | Windows |
| PC开发环境版本号 | win10 |
| HBuilderX类型 | 正式 |
| HBuilderX版本号 | 3.1.9 |
| 手机系统 | Android |
| 手机系统版本号 | Android 10 |
| 手机厂商 | OPPO |
| 手机机型 | PBEM00 |
| 页面类型 | nvue |
| 打包方式 | 云端 |
| 项目创建方式 | HBuilderX |
更多关于uni-app nvue页面修改uni-app组件样式不生效的实战教程也可以访问 https://www.itying.com/category-93-b0.html
1 回复
更多关于uni-app nvue页面修改uni-app组件样式不生效的实战教程也可以访问 https://www.itying.com/category-93-b0.html
在 nvue 页面中,样式作用机制与 vue 页面不同,因为 nvue 使用原生渲染,样式支持受限且作用域独立。App.vue 中的全局样式默认不会作用于 nvue 页面的组件。
解决方案:
- 在 nvue 页面内直接编写样式:将 slider 的自定义样式直接写在当前 nvue 页面的
<style>标签中,确保样式作用域正确。 - 使用条件编译:若需跨页面共享样式,可在 nvue 页面通过条件编译引入样式,例如:
/* #ifdef APP-NVUE */ .custom-slider { /* 你的样式 */ } /* #endif */

