react 使用ant-design（antd）安装引用（组件。样式）和 antd 自定义主题

第一，全部引入

1.安装

yarn  ass antd 或者 npm install antd

2.引用

import { Button } from 'antd';  // 引入组件

import  'antd/dist/antd.css';  // 引入样式

第二，按需引入

官网->版本->3.x->在 create-react-app 中使用->找到 #高级配置# 按照高级配置一步一步安装配置；

链接地址：https://3x.ant.design/docs/react/use-with-create-react-app-cn

 

 

第三、antd 自定义主题

官网->版本->3.x->在 create-react-app 中使用->找到 #自定义主题# 一步一步安装配置；

链接地址：https://3x.ant.design/docs/react/use-with-create-react-app-cn

注意 有个小坑：升级了 无法使用modifyvas 

所以需要改成能识别的这个样子；

点击蓝色字的配置主题，还可以查看更多的其他配置项目；

 

 

总结 按需引入加自定义主题

1。安装依赖    yarn add react-app-rewired customize-cra babel-plugin-import less less-loader  或者 npm install react-app-rewired customize-cra babel-plugin-import less less-loader 

2.如下图修改 package.jon

3.根目录创建config-overrides.js

const {override, fixBabelImports, addLessLoader} = require('customize-cra')
module.exports = override(
    fixBabelImports('import', {
        libraryName: 'antd',
        libraryDirectory: 'es',
        style: true
    }),
    addLessLoader({
        lessOptions: {
            javascriptEnabled: true,
            modifyVars: {'@primary-color': '#1DA57A'}
        }
    })
)

 

注意注意：遇到的坑

一.以上操作完出现以下错误

 

 

二. 问题的分析及解决：

问题的分析：这个实际上就是 less-loader less 的版本过高，不兼容 getOptions 函数方法，所以需要对 less-loader less 进行降级处理

问题的解决：通过yarn remove less less-loader 或者 npm uninstall less less-loader 命令卸载原版本的 less-loader，然后 通过yarn add less-loader@3.0.0 less@^2.7.3 或者 less-loader@3.0.0 less@^2.7.3 命令下载降级版本的 less-loader 和less版本，这个问题就可以解决了