解决vue项目打包后,写的覆盖element的样式无效

admin0条评论 306 次浏览

问题: (javascript)vue项目打包后,写的覆盖element的样式无效了。这是什么原因?
描述:

在开发模式模式下,写的覆盖样式都有效,打包后就无效,请问下是什么原因?
main.js里的css加载顺序

开发模式下

打包后在浏览器查看


解决方案1:

你的问题就是css权重问题 如果相同权重可能存在引入顺序问题

简单粗暴解决办法
1: 如果是单页面 写入index.html里面
2:直接修改源码的css 很简单~~~
3:加个!important

解决方案2:

你看下main.js中引入的顺序,是否和下面一样:

import 'element-ui/lib/theme-chalk/index.css'
import App from './App.vue'

如果相反,那么element-ui的样式会覆盖自定义的样式。

解决方案3:

在vue-cli中开发模式下,css样式是用js打到head中的style标签里的

而生产环境的css是用extract-text-webpack-plugin生成css文件引入的

这其中的样式优先级是不一样的。一般多写一个选择器增加下优先级就没问题了。