renxing2436
renxing2436
  • 发布:2021-10-23 09:12
  • 更新:2021-10-25 09:34
  • 阅读:344

在开发小程序时,如何引入外部样式且不合并样式文件?

分类:uni-app

需求是这样的
初始化一些默认样式存于 app.vue中,会合并到 common/main.wxss中,这是可以接受的
之后引入了第三方插件页面,更为奇怪的是,插件页面被 app.vue 中全局样式影响了,让别人改插件肯定不现实,所以想到一个修改方案是:给自己的所有页面 都引入一个 reset.wxss,引入了之后,发现所有的页面都各自把 reset.wxss合并到自己的样式文件中,导致包大小成倍增长

不论使用

<style>  
@import '@/common/reset.wxss';  
</style>

还是

<style>  
@import url('@/common/reset.wxss');  
</style>

都一样

现在有什么办法能让他们不合并,像在小程序样式文件中,直接加入这段代码

@import '@/common/reset.wxss'; 

哪位大神知道如何设置,非常感谢

2021-10-23 09:12 负责人:无 分享
已邀请:
DCloud_UNI_HT

DCloud_UNI_HT

某个文件引入外部样式 ,肯定会被编译到自己的页面wxss 中

而你在 App.vue 引入的样式 是做为全局的样式来的,所有页面和组件都会应用到,那么你可以从以下几个方面避免样式全局样式污染 :

  1. App.vue 中的样式做类名前缀 ,避免与插件样式冲突
  2. 修改冲突的全局样式的名字,效果同上
  3. (不推荐)联系插件作者给插件样式添加前缀,不支持插件的样式的唯一性
  4. 使用 scoped
  • renxing2436 (作者)

    由于引入了uview组件,这个UI组件给 view 和 text 设置了 box-sizing: borde-box;属性,导致插件页面显示错乱,现在不管让谁修改,都无能为力,已经到了进退两难的地步了

    2021-10-26 09:39

  • DCloud_UNI_HT

    回复 renxing2436: 给我弄一个简单的 demo 吧,我看看有没有什么奇怪的小方法可以解决

    2021-10-27 09:36

  • renxing2436 (作者)

    回复 DCloud_UNI_HT: 一个最简单的demo就是,在 app.wxss 中 或者 在 app.vue 样式中,使用 标签控制样式,比如 view { background: #eeeeee },然后再引入一个第三方插件,进入插件页面,就会发现插件页面的样式被 app.wxss 污染了

    2021-10-27 16:19

  • DCloud_UNI_HT

    回复 renxing2436: 如果组件不能修改的话,这种情况几乎就无解了,只能避免使用这种代码

    2021-10-28 10:58

该问题目前已经被锁定, 无法添加新回复