vue项目打包后，写的覆盖element的样式无效了。这是什么原因？

Question

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

开发模式下

打包后在浏览器查看

Answer 1

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

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

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

Answer 2

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

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

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

Answer 3

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

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