在create-react-app中使用craco

要使webpack.config.js生效，您必须从create-react-app中弹出。craco包解决了这个问题，如官方指南中所述。

1.使用npm安装相关的craco包

npm install --save-dev @craco/craco craco-less

2.将.css导入更改为.less

/* src/App.js */
import './App.css' -> './App.less';

/* src/App.less */
@import '~antd/dist/antd.css' -> '~antd/dist/antd.less';

3.在项目根目录中创建craco.config.js

const CracoLessPlugin = require("craco-less");

module.exports = {
  plugins: [
    {
      plugin: CracoLessPlugin,
      options: {
        lessLoaderOptions: {
          lessOptions: {
            modifyVars: {
              "primary-color": "#EB564F",
              "link-color": "#0DD078",
              "success-color": "#0DD078",
              "border-radius-base": "40px",
            },
            javascriptEnabled: true,
          },
        },
      },
    },
  ],
};

4.更新package.json中的脚本

"scripts": {
  "start": "craco start",
  "build": "craco build"
  "test": "craco test"
}

5.完成

不弹出create-react-app

要使webpack.config.js生效，您必须从create-react-app中弹出。有一种解决方法不需要弹出项目。

步骤

1.全局安装less
1.创建main.less文件并在其中包含antd.less
1.重新声明要覆盖的默认变量
1.将main.less编译为.css并将该文件包含在您的应用中

1.全局安装less

npm install -g less

2-3.创建一个main.less文件并在其中包含antd.less，然后重新声明要覆盖的默认变量

@import 'node_modules/antd/dist/antd.less';
@primary-color: #EB564F;
@link-color: #0DD078;
@success-color: #0DD078;
@border-radius-base: 40px;

4.将main.less编译为.css，并将该文件包含在您的应用中

从项目的根目录运行lessc "./src/styles/main.less" "./src/styles/css/antd.css" --js，然后将此css文件导入项目。
来源：Customising Ant Design (antd) theme without using react eject or any unreliable packages

如果您不想弹出React应用程序（使用CRA创建），请查看安装文档。

https://ant.design/docs/react/use-with-create-react-app x1c 0d1x的所有数据

此答案适用于那些希望在弹出create react应用程序后手动安装ANTD的用户。

• 使用的版本：*
• 临床研究评估4.0.3

React安装步骤：

• 使用yarn CRA命令创建React应用程序（yarn create react-app my-app）
• 退纱React应用（* 退纱 *）
  CRA没有更少的样板代码（至少在4.0.3之前）。。由于ANTD更少，我们手动安装它。（您可以直接导入antd css以跳过整个过程...但antd css不是按需提供的，它将下载所有组件的样式，即使我们不使用它们）
• 使用的版本：*
• 第4.13.1条
• babel-plugin-import - 1.13.3（用于按需导入组件）
• 小于-4.0.0
• 较少加载程序- 7.3.0
• 变量小于js- 1.3.0
  步骤：
• 使用此命令安装所有软件包

Yarn添加antd@4.13.1 &&Yarn添加babel插件导入@1.13.3小于@4.0.0小于加载器@7.3.0小于变量到js@1.3.0-D

Webpack配置和设置主题

1.在package.json中为Babel安装andd插件
“插件”：[ [“导入”，{“库名称”：“antd”，“风格”：false} ] ]

1.在src文件夹中创建antdTheme.less文件...（我们提供我们的主题
设置）

1.修改webpack.config.js（在此文件的三个位置进行了修改）
// Ant设计Webpack设定
如果您有任何问题，请使用以下命令：
这是一个很好的例子，它是一个很好的例子。
$/= /.$/=/.$/=/.$/=/.
如果您有任何问题，请在这里输入您的密码。

添加if else条件并添加此代码。请查看有关如何编写条件的图片

loaders.push(
          {
            loader: require.resolve("resolve-url-loader"),
            options: {
              sourceMap: isEnvProduction
                ? shouldUseSourceMap
                : isEnvDevelopment,
            },
          },
          {
            loader: require.resolve(preProcessor),
            options: {
              lessOptions: {
                modifyVars: themeVariables,
                javascriptEnabled: true,
              },
            },
          }
        );

x1c4d 1x指令集
添加此代码以支持越来越少的模块

// Ant Design config
            {
              test: lessRegex,
              exclude: lessModuleRegex,
              use: getStyleLoaders(
                {
                  importLoaders: 2,
                  sourceMap: isEnvProduction
                    ? shouldUseSourceMap
                    : isEnvDevelopment,
                },
                "less-loader"
              ),
              sideEffects: true,
            },
            // Adds support for CSS Modules, but using LESS
            // using the extension .module.less
            {
              test: lessModuleRegex,
              use: getStyleLoaders(
                {
                  importLoaders: 2,
                  sourceMap: isEnvProduction
                    ? shouldUseSourceMap
                    : isEnvDevelopment,
                  modules: true,
                  getLocalIdent: getCSSModuleLocalIdent,
                },
                "less-loader"
              ),
            },

更改这些文件后

• 使用yarn start启动应用程序。
• 你应该看到绿色为主要颜色，因此我们在我们的主题无文件使用相同的。更改他们根据您的要求（请记住，您必须重新启动时，您作出更改主题级别无文件）...

指令集

工作真的很好，什么@ rezso.dev上面说-没有弹出创建React应用程序。
其他可编辑的变量：

@primary-color: #1890ff; // primary color for all components
@link-color: #1890ff; // link color
@success-color: #52c41a; // success state color
@warning-color: #faad14; // warning state color
@error-color: #f5222d; // error state color
@font-size-base: 14px; // major text font size
@heading-color: rgba(0, 0, 0, 0.85); // heading text color
@text-color: rgba(0, 0, 0, 0.65); // major text color
@text-color-secondary: rgba(0, 0, 0, 0.45); // secondary text color
@disabled-color: rgba(0, 0, 0, 0.25); // disable state color
@border-radius-base: 2px; // major border radius
@border-color-base: #d9d9d9; // major border color
@box-shadow-base: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05); // major shadow for layers

https://ant.design/docs/react/customize-theme