前景提要:
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...
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。