1.我们在用element组件库中的插件,经常感觉他自带的样式不太符合咱们项目的需求,想修改还没效果怎么办?广大网友提供了很多方法,找到最多的解决方法就是样式穿透(/deep/,:v-deep),我个人试过很多次可能哪里没写对完全没效果,真的很苦恼
这里的解决方法是再写一个style标签,与scoped私有属性标签分开,标签属性检查查到
这样运行之后样式应该可以改变了,但是要注意新写的style没有scoped,属于全局样式了,所有修改需谨慎
2.然后是打包,打包之后会发现,插件样式还是没变是怎么回事?
分析原因
main.js中的引入顺序决定了打包后css的顺序,组件内的样式没有生效可能是被第三方组件样式覆盖了,所以把第三方组件放在前面引入,router放在后面引入,就可以实现组件样式在第三方样式之后渲染。相信很多小伙伴都试过了,然并无卵用。。
还是引入顺序问题,在引入App之后引入的ElementUI样式会覆盖自定义样式,so
修改main.js,调整组件引入顺序
//先引入ui及样式
import ElementUI from"element-ui"
import "element-ui/lib/theme-chalk/index.css" //确保在import APP之前引入
...略
import App from"./app/App"
import router from"./router"// 最后引入路由
以上是我个人遇到和解决的问题,可能还有不足,希望诸位大佬留言指正