[React] Set react to support less pre-compilation and Antd on-demand loading

1 install¶

npm i @craco/craco

npm i craco-less #less processing plugin

npm i babel-plugin-import #Automatically import antd's css style

2. Configuration¶

• Create a craco.config.js file in the root directory
• Configuration:

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

module.exports = {
     babel: {
         plugins: [
             [
                 "import", //Support automatic loading of styles
                 {
                     "libraryName": "antd",
                     "libraryDirectory": "es",
                     "style":'css' //Set to true is less, here is css
                 }
             ]
         ]
     },
     plugins: [
         {
             plugin: CracoLessPlugin,
             options: {
                 // Here there will be different configurations depending on the version of less-loader, see less-loader official documentation for details
                 lessLoaderOptions: {
                     lessOptions: {
                         // Theme configuration
                         modifyVars: {'@primary-color':'#1DA57A' },// default color #1A8AF5 blue
                         javascriptEnabled: true
                     }
                 }
             }
         }
     ]
}