【React】设置 react 支持 less 预编译和 Antd 按需加载

1. 安装

npm i @craco/craco

npm i craco-less #less处理插件

npm i babel-plugin-import #自动导入antd的css样式

2. 配置

1. 在根目录创建craco.config.js 文件

2. 配置：

   const CracoLessPlugin = require("craco-less");
   
   module.exports = {
       babel: {
           plugins: [
               [
                   "import", //支持样式自动加载
                   {
                       "libraryName": "antd",
                       "libraryDirectory": "es",
                       "style": 'css' //设置为true即是less 这里用的是css
                   }
               ]
           ]
       },
       plugins: [
           {
               plugin: CracoLessPlugin,
               options: {
                   // 此处根据 less-loader 版本的不同会有不同的配置，详见 less-loader 官方文档
                   lessLoaderOptions: {
                       lessOptions: {
                           // 主题配置
                           modifyVars: { '@primary-color': '#1DA57A' },// 默认颜色#1A8AF5蓝色
                           javascriptEnabled: true
                       }
                   }
               }
           }
       ]
   }