Element-ui overrides css,. Why does it work normally in development mode, but not after build?

element-ui overrides why css, works normally in development mode npm run dev, does not work after
npm run build, and all styles become the default.

effect display:
npm run dev

npm run build

Code in style of APP.vue

<style>
/*  */
.el-dialog {
  background: rgb(77, 73, 65);
}
.el-dialog__title {
  color: -sharpcfccb9
}
.el-dialog__body {
  padding: 16px 10px;
  color: -sharpcec9c2;
  line-height: 20px;
  font-size: 14px
}
</style>

Element-ui build

Mar.06,2021

Whether

has been pulled out of the app.css, the unsuccessful style is obviously a lack of priority, so the most likely problem is that the style you set has been overridden by the native css of element.

add an import

Thank you very much for your answers. Here is a positive solution published by kedaya:

The style in

dev is not overwritten. Dev adds your element style through the js append
style tag, while after build your element base style is introduced through link's css.

the root cause of the phenomenon I have described is the problem of priority coverage caused by the above reasons.

the solution can be solved with "rabbit likes to eat pear" and "toBeTheLight", which has been tested.

Previous: How css3 Animation is compatible with ie9

Next: Vue uses data-driven thought to achieve operation dom?