虽然官方提供了craco-less 来 覆盖less-loader 提供的 less 变量，但自己也想试着修复config来配置一下
首先需要运行 yarn eject 来暴露webpack的配置
其次需要安装less-loader（注意这个需要在3以下） 和 babel-plugin-import
yarn add less@^2.7.3
yarn add babel-plugin-import
然后打开webpack.config.js
一、配置babel全局引入.css
在对应的 test: /\.(js|mjs|jsx|ts|tsx)$/, 方法的plugins中增加
['import',{
libraryname:'antd',
style:true
}],
修改后如下
// process application js with babel.
// the preset includes jsx, flow, typescript, and some esnext features.
{
test: /\.(js|mjs|jsx|ts|tsx)$/,
include: paths.appsrc,
loader: require.resolve('babel-loader'),
options: {
customize: require.resolve(
'babel-preset-react-app/webpack-overrides'
),
presets: [
[
require.resolve('babel-preset-react-app'),
{
runtime: hasjsxruntime ? 'automatic' : 'classic',
},
],
],
plugins: [
[
require.resolve('babel-plugin-named-asset-import'),
{
loadermap: {
svg: {
reactcomponent:
'@svgr/webpack?-svgo, titleprop, ref![path]',
},
},
},
],
['import',{
libraryname:'antd',
style:true
}],
isenvdevelopment &&
shouldusereactrefresh &&
require.resolve('react-refresh/babel'),
].filter(boolean),
// this is a feature of `babel-loader` for webpack (not babel itself).
// it enables caching results in ./node_modules/.cache/babel-loader/
// directory for faster rebuilds.
cachedirectory: true,
// see #6846 for context on why cachecompression is disabled
cachecompression: false,
compact: isenvproduction,
},
},
二、增加less-loader
在
// style files regexes
const cssregex = /\.css$/;
const cssmoduleregex = /\.module\.css$/;
代码中增加less 正则变量
// style files regexes
const cssregex = /\.css$/;
const cssmoduleregex = /\.module\.css$/;
const lessregex = /\.less$/;
const lessmoduleregex = /\.module\.less$/;
然后拷贝一份如下配置css-loader代码
// "postcss" loader applies autoprefixer to our css.
// "css" loader resolves paths in css and adds assets as dependencies.
// "style" loader turns css into js modules that inject