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

最新推荐文章于 2024-11-19 16:32:15 发布

原创最新推荐文章于 2024-11-19 16:32:15 发布 · 5k 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#react antd安装 #react中配置antd #antd配置流程

React 专栏收录该内容

8 篇文章

订阅专栏

本文详细介绍了在React项目中安装和配置antd的步骤，包括基础安装、按需加载样式，利用react-app-rewired进行高级配置，以及如何定制主题和改变主题颜色，帮助开发者高效使用antd。

文章目录

在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' }, 
- }),
  );