uni-app与node_modules的样式冲突

uni-app与node_modules的样式冲突

2 回复

wangeditor这个插件没有兼容uniapp吧 可以试试插件市场中兼容过uniapp的wangeditor插件：https://ext.dcloud.net.cn/plugin?id=16444 或者你把@wangeditor/editor/dist/css/style.css直接引入到index.html中试试

更多关于uni-app与node_modules的样式冲突的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在uni-app开发中，node_modules依赖包的样式与项目样式冲突是常见问题。建议通过以下方式解决：

  1. 使用scoped样式
    在Vue单文件组件的<style>标签中添加scoped属性，确保样式仅作用于当前组件：
<style scoped>
/* 这里的样式不会影响node_modules中的组件 */
</style>
  1. 提升样式优先级
    通过增加CSS选择器权重覆盖第三方样式：
/* 使用ID或重复类名提升优先级 */
.container .element { color: red !important; }
  1. 条件编译
    在App.vue中通过条件编译控制全局样式加载：
/* #ifndef APP-NVUE */
@import url('第三方样式库');
/* #endif */

  1. 检查样式引入顺序
    确保自定义样式在第三方样式之后引入，后续样式会覆盖前者。

  2. 使用深度选择器
    如需修改子组件样式，使用/deep/或::v-deep（注意HBuilderX版本兼容性）：

.parent /deep/ .child { color: blue; }
回到顶部