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

文章目录

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

安装 antd
高级配置

react-app-rewired

定制主题/主题颜色

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