dcloudio / uni-app

A cross-platform framework using Vue.js
https://uniapp.dcloud.io
Apache License 2.0
40.18k stars 3.64k forks source link

如何去掉style默认hash #327

Closed ranwawa closed 5 years ago

ranwawa commented 5 years ago

业务背景 引入外部组件,比如swipe 要调整指示器样式,比如把圆点变成长方形

问题描述 通过自定义样式覆盖默认样式 但是不生效 发现自动给所有样式加了hash值 然而我在style标签上并没有使用scope属性

期望解决 不要强制scoped 即使默认是有,给个配置的地方可以关闭

xiaoyucoding commented 5 years ago

如果直接移除 scoped 的话影响比较大,另外内置组件是多平台保持一致的,没有提供类似的规范修改样式。 如果是希望自定义 swipe 的话,可以用这个组件:swiper-dot 类似的需求,都可以通过自定义组件的这种思路来处理。

ranwawa commented 5 years ago

如果直接移除 scoped 的话影响比较大,另外内置组件是多平台保持一致的,没有提供类似的规范修改样式。 如果是希望自定义 swipe 的话,可以用这个组件:swiper-dot 类似的需求,都可以通过自定义组件的这种思路来处理。

谢谢你的回答..

  1. 这个不仅仅是uni内置组件有影响 ,其他任何第三方组件都有影响....
  2. 一些小的改动如果还要单独搞个自定义组件就比较麻烦了哈

目前我的解决办法是:

fxy060608 commented 5 years ago

h5 平台非 App.vue 中的样式一定是强制 scoped,否则无法处理各页面样式隔离 如果需要全局生效,请在 App.vue 中添加样式代码(注意权重)

yeyifen commented 5 years ago

强制 scoped 感觉不太合理,目前遇到用 v-html 加载代码,在微信小程序可以通过class设置里面的样式,在这里被加了 scoped 导致样式不生效了

fxy060608 commented 5 years ago

强制 scoped 感觉不太合理,目前遇到用 v-html 加载代码,在微信小程序可以通过class设置里面的样式,在这里被加了 scoped 导致样式不生效了

你现在只是部分情况 scoped 导致样式不生效的问题,如果不用 scoped,你就会发现,你的样式,在 h5和其他平台经常性不一致,因为非 h5 平台,页面是独立 webview,样式是天然隔离的,而 h5 平台是天然不隔离,h5 上不 scoped,就会导致不同页面,不同组件的所有样式都是互相作用,除非你每个页面样式自己维护唯一性。

linden5 commented 5 years ago

个人也比较希望能加一个配置,让用户选择是否强制scoped,默认可以是强制scoped。 现在强制scoped导致开发体验和Vue,megalo,mpvue不一致了,想从组件外面覆盖组件的原有样式变得非常麻烦。

另外,说个题外话,大量使用scoped这个功能我觉得弊端比较大:

  1. 鼓励用户对样式随意命名。一个项目放眼望去各种组件最外层容器不管样式是否相同或相似全叫container
  2. 引入同样的样式文件依scope不同会编译出来多套,白白增大体积

保持行为和Vue一致的话,我觉得维护样式维一性不是一个问题,一个组件里面可以有scoped的样式,也可以有非scoped的样式。

最后,希望官方能考虑一下将scoped与否交给用户来控制。

fxy060608 commented 5 years ago

后续会开放编译器配置,可以自己手动移除我们的 scoped loader,如果是 cli 工程,现在就可以控制 vue.config.js

module.exports = {
  chainWebpack(webpackConfig){
      webpackConfig.module
      .rule('vue')
      .uses
      .delete('uniapp-scoped')
  }
}
linden5 commented 5 years ago

谢谢开发同学的建议,去掉uniapp-scoped之后,style hash的问题解决了。不过因为微信小程序的组件样式默认是隔离的,想把h5的那套覆盖样式的方法照搬还是不现实。强制加scoped确实是有一定道理的。