likes
comments
collection
share

[Vue] element-ui 全局样式覆写不成功问题排查解决

作者站长头像
站长
· 阅读数 31

前景提要：Vue2 + element-ui项目，对element-ui的样式表进行覆写，实现自定义样式。

正常情况下，我们在Vue2的项目中使用element-ui，需要1、引入element-ui2、Vue.use(Element)3、引入样式表。[Vue] element-ui 全局样式覆写不成功问题排查解决现在要对element-ui的样式表进行覆写，作用范围为全局。覆写样式不成功。

情况排查：对element-ui进行全局样式覆写时，发现新增的样式表B成功添加，但被另外的样式表覆盖。[Vue] element-ui 全局样式覆写不成功问题排查解决控制台Elements点击element-ui组件，能看到两份样式表A，样式表B的样式，问题是样式表B的样式大段的被划掉，下面又有新的样式表C，样式表C覆盖了自定义的样式表B。

这个情况下，全局搜索"theme-chalk"，大概率能在babel.config.js中找到一个plugins(见到下面这段代码)

[
  "component",
  {
    libraryName:  "element-ui",
    styleLibraryName: "theme-chalk"
  }
]

把它注释掉，再看控制台Elements，可以发现样式表C没了，解决。

未完待续。

同步更新到自己的语雀https://www.yuque.com/diracke...