Antd使用craco按需加载样式以及自定义主题颜色

一.安装

"@craco/craco": "^6.3.0",
"babel-plugin-import": "^1.13.3", //自动导入antd的css样式
"craco-less": "^1.20.0",  

以上是我安装的版本,默认安装即可
yarn add @craco/craco babel-plugin-import craco-less
或
npm i @craco/craco babel-plugin-import craco-less

二.配置package.json

/* package.json */
"scripts": {
-   "start": "react-scripts start",	//去除
-   "build": "react-scripts build", //去除
-   "test": "react-scripts test",  //去除
+   "start": "craco start",	//添加
+   "build": "craco build", //添加
+   "test": "craco test", //添加
}

三.配置craco.config.js

在根目录下，即package.json的同级目录下，创建craco.config.js文件

const CracoLessPlugin = require("craco-less");

module.exports = {
	 //按需引入
    babel: {
        plugins: [
            [
                "import",
                {
                    "libraryName": "antd",
                    "libraryDirectory": "es",
                    //可以设置为true即是less,注意！！！！此时不需要加引号
                    //也可以设置为css,css需要加引号
                    "style": true 
                }
            ]
        ]
    },
    //自定义主题
    plugins: [
        {
            plugin: CracoLessPlugin,
            options: {
                // 此处根据 less-loader 版本的不同会有不同的配置，详见 less-loader 官方文档
                lessLoaderOptions: {
                    lessOptions: {
                  		 //颜色即为自定义颜色
                        modifyVars: { '@primary-color': '#ffff00' },
                        javascriptEnabled: true
                    }
                }
            }
        }
    ]
}

四.注意

不需要在组件里亲自引入样式，即：import 'antd/dist/antd.css’应该删掉，会自动按需引入

五.效果