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

Question

教程在这里：https://ant.design/docs/react/use-with-create-react-app 只讲Antd如何与CRA app集成。

我弹出了我的 cra 应用程序，需要将 Antd 添加到我的项目中。我想我不需要安装 "react-app-rewired" 因为我已经弹出了我的项目，所以我应该可以直接去某个地方配置它。

因为我想用"modularized antd"，所以我安装了"babel-plugin-import"

然后我需要添加这个：

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

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

在此文件中，我找到了以下部分：

module.exports -> plugins:[...]

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

更新

我试过一次是可行的，但似乎antd样式影响了现有样式。这是网页的原始外观：

这是（添加 Antd 后的）

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

如何解决？

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,
            },
        },

这是毫不逊色的。对于 less 和主题，我找到了一个包含您的设置说明的文档版本：https://github.com/ant-design/ant-design/blob/be238c788775990d4f15c9f83c16ca4db7226271/docs/react/use-with-create-react-app.en-US.md

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

add Ant Design with ejected create-react-app project in Webpack config

reactjs

webpack

antd

更新