element-ui 通过变量修改默认样式

项目用的是 element-ui + vue

项目里有个需求是要修改 element 消息提示组件中 warning 类型的背景色和那个小感叹号的背景色

有两种方式，第一种比较简单，用 F12 找到想要修改的元素，直接覆盖对应样式。但考虑到有时候这个样式需要应用到多个组件，比如我需要同时修改如下图这几个组件的颜色，

这几个组件有的可能还会涉及到 hover 或者被选中时的特殊状态的颜色，那用第一种方法就显得太过繁琐，而且不容易覆盖所有场景。

这时候就可以用第二种方式，新建一个样式文件，例如 styleVariables.scss，用来覆盖ElementUI的样式，像官方文档中这样引入即可。

修改主题色或者统一的默认样式时可以在这个文件中通过修改变量的方式去修改，如：

$--color-primary: #409EFF;
$--color-warning: #E6A23C;
$--color-info: #909399;

变量的名字在 node_modules > element-ui > packages > theme-chalk > src > common > var.scss 中可以找到。这样通过变量修改的颜色就可以覆盖 element 组件的全部场景啦！