在弹出的 CRA 中自定义 Antd答案

【问题标题】：Customize Antd in ejected CRA在弹出的 CRA 中自定义 Antd
【发布时间】：2019-08-02 07:59:39
【问题描述】：

我制作了一个新的 CRA，并且正在使用 Ant Design 库。查看说明，我并不是 100% 清楚我到底需要做什么，但是从我能收集到的信息来看，由于我已经弹出了我的应用程序，我可以修改我的 webpack.config.js 文件并完成它。

很遗憾，我所做的更改似乎没有得到体现

我已将以下内容添加到我的规则数组中

    {
      test: /\.less$/,
      use: [{
        loader: require.resolve('style-loader'),
      }, {
        loader: require.resolve('css-loader'), // translates CSS into CommonJS
      }, {
        loader: require.resolve('less-loader'), // compiles Less to CSS
        options: {
          modifyVars: {
            'primary-color': '#1DA57A',
            'link-color': '#1DA57A',
            'border-radius-base': '2px',
          },
          javascriptEnabled: true,
        },
      }],
    },

请问有谁知道我怎样才能让它工作？

【问题讨论】：

有点晚了，但可能对其他人有所帮助：在添加上述 webpack 规则后，您还需要将 antd.css 文件导入交换为应用程序 jsx/js 文件中的 .less 版本： (import 'antd/dist/antd.css' > import 'antd/dist/antd.less')

标签： reactjs webpack antd

【解决方案1】：

而不是弹出。您可以使用 customize-cra 包覆盖默认设置。 Ant design 已经添加了关于创建反应应用程序的使用文档。请检查此link。

希望这会有所帮助！

【讨论】：