Create-React-App 版本：v4.0.1
1. 未执行yarn eject的情形下
@craco/craco（Create React App Configuration Override - 配置扩展库）版本：v5.8.0
craco.config.js配置文件代码内容如下：
const CracoLess = require('craco-less');
const CracoAntDesign = require('craco-antd');
const path = require('path');
module.exports = {
plugins: [
// 针对Less的相关配置（如module样式）
{
plugin: CracoLess,
options: {
lessLoaderOptions: {
lessOptions: { javascriptEnabled: true },
},
modifyLessRule: function() {
return {
test: /\.module\.less$/,
exclude: /node_modules/,
use: [
{ loader: 'style-loader' },
{
loader: 'css-loader',
options: {
modules: {
localIdentName: '[local]_[hash:base64:6]',
},
},
},
{ loader: 'less-loader' },
],
};
},
},
},
// `Ant Design`相关配置
{
plugin: CracoAntDesign,
options: {
customizeThemeLessPath: path.join(
__dirname,
'src/antd.customize.less',
),
},
},
],
};
2. CRA原始工程已被eject的情形下
CRA v4.0.1版本eject后直接运行可能会报错，提示“找不到@babel/plugin-syntax-jsx” ！
这里我们手动安装一下: yarn add -D @babel/plugin-syntax-jsx
因为工程中，我们还需要用到less和less-loader，所以先安装下：
yarn add -D less less-loader
webpack.config.js文件中（v4.0.1版本的第535行之后，sass相关配置之后）增添如下代码：
{ test: lessRegex, exclude: lessModuleRegex, use: getStyleLoaders( { importLoaders: 3, sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment, }, 'less-loader' ), sideEffects: true, }, { test: lessModuleRegex, use: getStyleLoaders( { importLoaders: 3, sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment, modules: { getLocalIdent: getCSSModuleLocalIdent, }, }, 'less-loader' ), }, // lessRegex 在上部自行定义： const lessRegex = /\.less$/; // lessModuleRegex 在上部自行定义： const lessModuleRegex = /\.module\.less$/;
