【React】脚手架如何设置antd按需加载样式及设置别名

使用脚手架创建好应用及安装好antd如何实现按需加载样式呢？

首先，安装如下组件，这里使用npm命令：

npm install @craco/craco  customize-cra  craco-less babel-plugin-import

其次，修改package.json内容如下：

"scripts": {
   "start": "craco start",
   "build": "craco build",
   "test": "craco test",
}

最后，在于package.json同级目录创建文件craco.config.js，文件内容如下：

//设置antd按需加载样式
const CracoLessPlugin = require('craco-less'); 

//配置路径别名
const path = require('path');
module.exports = { 
  plugins: [ 
    { 
       plugin: CracoLessPlugin, 
     options: { 
         lessLoaderOptions: { 
             lessOptions: { 
                modifyVars: { '@primary-color': '#1A8AF5' }, 
            javascriptEnabled: true, 
          }, 
        }, 
      }, 
    },
  ], 
  babel:{
    plugins:[
      ['import',{ 
        libraryName: 'antd', 
        libraryDirectory: 'es',
        style: true, 
        }
      ]
    ]
  },
   webpack: {
     //别名
     alias: {
     "@": path.resolve("src"), 
     }
    
   }
};

最后重启项目，导入antd组件时，不需要再引入对应组件样式。对src路径重名为“@“，导入组件时可以​​import About from "@/components/About"​​使用绝对路径，减少引用组件时路径调整问题