使用craco中create-react-app

要webpack.config.js生效，您必须从create-react-app. 该craco软件包按照官方指南中的描述解决了这个问题。

1.craco使用npm安装相关包

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. 完成

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

https://ant.design/docs/react/use-with-create-react-app

这个答案是为那些想在弹出 create react app 后手动安装 ANTD 的人准备的。

使用的版本：

• CRA 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

脚步：

• 使用此命令安装所有软件包

  纱线添加 antd@4.13.1 && 纱线添加 babel-plugin-import@1.13.3 less@4.0.0 less-loader@7.3.0 less-vars-to-js@1.3.0 -D

Webpack 配置和设置主题

1. 在 package.json 中为 babel 安装 antd 插件

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

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

3. 修改webpack.config.js（本文件三处修改）

   // Ant Design Webpack 配置

   const lessToJs = require("less-vars-to-js");

   const themeVariables = lessToJs( fs.readFileSync(path.join(__dirname, "./../src/antdTheme.less"), "utf8"));

   const lessRegex = /.less$/;

   const lessModuleRegex = /.module.less$/;

添加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,
              },
            },
          }
        );

添加此代码以支持越来越少的module

// 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 启动您的应用程序。
• 您应该看到绿色作为原色，因此我们在我们的主题少文件中使用了相同的颜色..根据您的要求更改它们（请记住，当您更改主题级别的文件时必须重新启动）...

不弹出 create-react-app

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

脚步

1. less全局安装
2. 创建一个main.less文件并包含antd.less在其中
3. 重新声明要覆盖的默认变量
4. 编译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 文件。

来源：自定义 Ant Design (antd) 主题，无需使用 react 弹出或任何不可靠的包

上面@rezso.dev 所说的非常有效 - 无需弹出 create-react-app。

其他可以编辑的变量：

@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