ant-vue-design全局样式污染问题-使用模块资源替换解决

2021-03-11 2,327 阅读1分钟

问题描述

ant-design-vue库会引入一个全局css样式文件，其主要功能是重置样式，包含了一些列对基础标签（html、body等）的样式修改，和定义了一系列动画类。这可能会与项目本省定义的样式和类冲突，使得样式出现问题。

在ant-design-vue的github仓库中已经有人提出了这个问题（Global CSS included with component CSS import · Issue #4331 · ant-design/ant-design (github.com)），官方也在文档中指明（常见问题 - Ant Design Vue (antdv.com)），但是他们表示目前无法修复。

解决方法

所以为了解决这个问题，目前可以采取的方式是使用webpack的NormalModuleReplacementPlugin插件全局替换掉ant-design-ve的这个样式文件。注意：这个解决方法建立在使用babel-import-plugin方式引入ant-design-vue的前提下。

配置

复制一份node_modules中ant-design-vue/es/style/index.css到项目方便修改的地方，修改其中影响全局样式的代码。
添加webpack配置，在NormalModuleReplacementPlugin的第二个参数传入替换文件的地址。

new webpack.NormalModuleReplacementPlugin(
    /ant-design-vue[/\\]es[/\\]style[/\\]index\.css/,
    path.resolve(__dirname, './path/to/replace.css')
)