关于vue.js:Vue-elementui-全局样式覆写不成功问题排查解决

46次阅读

共计 523 个字符,预计需要花费 2 分钟才能阅读完成。

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

失常状况下,咱们在 Vue2 的我的项目中应用 element-ui,须要
1、引入 element-ui
2、Vue.use(Element)
3、引入样式表。

当初要对 element-ui 的样式表进行覆写,作用范畴为全局。覆写款式不胜利。

状况排查:对 element-ui 进行全局款式覆写时,发现新增的样式表 B 胜利增加,但被另外的样式表笼罩。

控制台 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…

正文完
 0