React项目中安装和配置antd流程

在React 项目中安装和配置 antd 流程

安装 antd

• yarn add antd
• npm i antd

使用 antd 的样式

这种方式是使用 antd 的全部样式, 比较浪费, 一般我们不这么引入, 一般都是按需引入的方式使用 antd 的样式.

@import '~antd/dist/antd.css;

高级配置

按需加载 antd 的样式

react-app-rewired

(一个对 create-react-app 进行自定义配置的社区解决方案)

• 安装: yarn add react-app-rewired customize-cra
• 修改 package.json

package.json

 "scripts": {
    -   "start": "react-scripts start",
    +   "start": "react-app-rewired start",
    -   "build": "react-scripts build",
    +   "build": "react-app-rewired build",
    -   "test": "react-scripts test",
    +   "test": "react-app-rewired test",
    }

• 安装 babel-plugin-import yarn add babel-plugin-import

• 新建config-overrides.js 文件 (用来修改 默认的配置)

config-overrides.js 文件

  module.exports = function override(config, env) {
  // do stuff with the webpack config...
  return config;
  };

• 修改 config-overrides.js 的配置

+ const { override, fixBabelImports } = require('customize-cra');
    - module.exports = function override(config, env) {
    -   // do stuff with the webpack config...
    -   return config;
    - };
    + module.exports = override(
    +   fixBabelImports('import', {
    +     libraryName: 'antd',
    +     libraryDirectory: 'es',
    +     style: 'css',
    +   }),
    + );

定制主题/主题颜色

• 添加 less-loader

yarn add less less-loader

• 配置 config-overrides.js

- const { override, fixBabelImports } = require('customize-cra');

- const { override, fixBabelImports, addLessLoader } = require('customize-cra');

  module.exports = override(
  fixBabelImports('import', {
      libraryName: 'antd',
      libraryDirectory: 'es',

- style: 'css',

- style: true,
  }),
- addLessLoader({
- javascriptEnabled: true,
    // 这里是 修改 less 中定义的变量,可以修改其 变量的值来修改主题颜色.
- modifyVars: { '@primary-color': '#1DA57A' }, 
- }),
  );