element-ui覆盖了css,为什么开发模式下正常生效，build后无效?

Question

element-ui覆盖了css,为什么开发模式npm run dev 下正常生效，
npm run build后无效，所有的样式变为原先默认的样子。

效果展示：

在APP.vue的style中代码

<style>
/* 对话框自定义 */
.el-dialog {
  background: rgb(77, 73, 65);
}
.el-dialog__title {
  color: #cfccb9
}
.el-dialog__body {
  padding: 16px 10px;
  color: #cec9c2;
  line-height: 20px;
  font-size: 14px
}
</style>

Answer 1

有没有被抽离到app.css里面，样式不成功很显然是优先级不够，那么最可能的问题就是，你设置的这些style又element原生的css覆盖了呗。

Answer 2

加个import

Answer 3

非常感谢大家的解答，这里引用一个由kedaya发表的正解：

dev里的style没有被覆盖。dev里是通过js append
style标签来加入你的element的样式，而build之后你的element基础样式是通过link的css引入的。

而我所描述的现象的根本原因是：上述原因引起的优先级覆盖的问题。

解决方案，用“兔子爱吃梨”、“ toBeTheLight ”都可以解决，已亲测。