ant-vue-design全局樣式污染問題-使用模塊資源替換解決

問題描述

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的前提下。

配置

1. 複製一份node_modules中ant-design-vue/es/style/index.css到項目方便修改的地方，修改其中影響全局樣式的代碼。
2. 添加webpack配置，在NormalModuleReplacementPlugin的第二個參數傳入替換文件的地址。

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