在Webpack配置中添加带有弹出的create-react-app项目的Ant Design

Question

更新1：

一旦我尝试了它，但似乎antd样式影响现有的风格。 这是网页的原始外观：

，这是后观（在添加Antd之后）

您可以看到h2 a p elemtns都受到影响。这是不需要的，不应该发生，因为Antd的模块化导入应该只导入按钮的样式。

如何解决？

这里的教程： https://ant.design/docs/react/use-with-create-react-app 仅介绍如何将Antd与CRA app集成。

我弹出了我的应用程序，需要将Antd添加到我的项目中。 我想我不需要安装“react-app-rewired”，因为我已经弹出了我的项目，所以我应该能够直接去某处配置它。

因为我想使用“模块化的antd”，所以我安装了“babel-plugin-import”

然后我需要添加：

config = injectBabelPlugin(['import', { libraryName: 'antd', libraryDirectory: 'es', style: 'css' }], config);

在我的 webpack.config.dev.js （我想，因为我找不到任何关于它的文件）

在此文件中，我找到了以下部分： module.exports - ＆gt;插件：[...]

我只是错过了关于如何以及在何处放置此代码的最后一步。

请帮忙。

由于

Answer 1

        // Process JS with Babel.
        {
            test: /\.(js|jsx)$/,
            include: paths.appSrc,
            loader: require.resolve( 'babel-loader' ),
            options: {
                plugins: [
                    [ 'import', [ { libraryName: 'antd', style: 'css' } ] ],  // Ant Design
                ],

                // This is a feature of `babel-loader` for webpack (not Babel itself).
                // It enables caching results in ./node_modules/.cache/babel-loader/
                // directory for faster rebuilds.
                cacheDirectory: true,
            },
        },

这不能少。为了减少主题，我找到了一个包含设置说明的文档版本：https://github.com/ant-design/ant-design/blob/be238c788775990d4f15c9f83c16ca4db7226271/docs/react/use-with-create-react-app.en-US.md