如何修复Antd Babel导入CSS覆盖自定义CSS？

Question

在我的react应用程序中，我已经导入了antd组件，并使用babel import来延迟加载CSS样式。

['import', { libraryName: 'antd', style: true }, "antd"]

我有一些自定义的scss样式，可以覆盖antd组件样式。

在开发中，我的自定义scss完美地覆盖了antd样式。

但是当我运行npm build时，情况恰恰相反，antd会覆盖我的自定义样式。

Answer 1

经过反复试验后，我解决了该问题。 https://github.com/ant-design/babel-plugin-import文档帮助我解决了这个问题。

我使用了style: true，它可以导入源文件。我将其更改为style: 'css'，它导入了预编译的CSS

['import', { libraryName: 'antd', style: 'css' }, "antd"]

这对我有用。我的自定义scss样式在构建时会覆盖antd样式。