在create-react-scripts创建的项目中,我们要使用antd组件库,由于antd是less的,而create-react-scripts默认的是支持saas,所以我们要在配置上做一些调整,使其支持ant按需加载,less,以及css-modules。
根据官网文档,我们可以使用@craco/craco来修改webpack的配置。
调整后的craco.config.js文件如下
const CracoAntDesignPlugin = require("craco-antd");
const CracoLessPlugin = require('craco-less');
module.exports={
plugins: [
{
plugin: CracoAntDesignPlugin,
},
{
plugin: CracoLessPlugin,
options: {
modifyLessRule: function(lessRule, _context) {
lessRule.test = /\.(module)\.(less)$/;
lessRule.exclude = /node_modules/;
return lessRule;
},
cssLoaderOptions: {
modules: {
localIdentName: '[name]__[local]--[hash:base64:5]',
}
},
lessLoaderOptions: {
lessOptions: {
javascriptEnabled: true,
},
}
},
},
]
}