vue项目element-ui组件自定义样式设置,以及打包build上线后样式失效问题

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"// 最后引入路由

         以上是我个人遇到和解决的问题,可能还有不足,希望诸位大佬留言指正

  • 2
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值