虽然官方提供了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全局引入antd.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 <style> tags.
// In production, we use MiniCSSExtractPlugin to extract that CSS
// to a file, but in development "style" loader enables hot editing
// of CSS.
// By default we support CSS Modules with the extension .module.css
{
test: cssRegex,
exclude: cssModuleRegex,
use: getStyleLoaders({
importLoaders: 1,
sourceMap: isEnvProduction
? shouldUseSourceMap
: isEnvDevelopment,
}),
// Don't consider CSS imports dead code even if the
// containing package claims to have no side effects.
// Remove this when webpack adds a warning or an error for this.
// See https://github.com/webpack/webpack/issues/6571
sideEffects: true,
},
// Adds support for CSS Modules (https://github.com/css-modules/css-modules)
// using the extension .module.css
{
test: cssModuleRegex,
use: getStyleLoaders({
importLoaders: 1,
sourceMap: isEnvProduction
? shouldUseSourceMap
: isEnvDevelopment,
modules: {
getLocalIdent: getCSSModuleLocalIdent,
},
}),
},
修改后，然后将其追加到上面的css-loader之后即可
// add less-loader options
{
test: lessRegex,
exclude: lessModuleRegex,
use: getStyleLoaders({
importLoaders: 2,
sourceMap: isEnvProduction
? shouldUseSourceMap
: isEnvDevelopment,
},
'less-loader'),
sideEffects: true,
},
// Adds support for less Modules
// using the extension .module.less
{
test: lessModuleRegex,
use: getStyleLoaders({
importLoaders: 2,
sourceMap: isEnvProduction
? shouldUseSourceMap
: isEnvDevelopment,
modules: {
getLocalIdent: getCSSModuleLocalIdent,
}
},
'less-loader' )
},
三、配置lessOptions
1、修改less-loader
这个直接在less-loader后面追加如下代码
lessOptions:{
modifyVars: { '@primary-color': '#f9c700' },
javascriptEnabled: true,
}
修改后的less-loader
// add less-loader options
{
test: lessRegex,
exclude: lessModuleRegex,
use: getStyleLoaders({
importLoaders: 2,
sourceMap: isEnvProduction
? shouldUseSourceMap
: isEnvDevelopment,
},
'less-loader',
{
lessOptions:{
modifyVars: { '@primary-color': '#f9c700' },
javascriptEnabled: true,
}
}
),
sideEffects: true,
},
2、修改getStyleLoaders
再修改getStyleLoaders方法为其增加一个参数
const getStyleLoaders = (cssOptions, preProcessor,params={}) => {
if (preProcessor) {
loaders.push(
{
loader: require.resolve('resolve-url-loader'),
options: {
sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
root: paths.appSrc,
},
},
{
loader: require.resolve(preProcessor),
options: {
sourceMap: true,
...params
},
}
);
}
return loaders;
})
最后完整的less-loader是这样的
// add less-loader options
{
test: lessRegex,
exclude: lessModuleRegex,
use: getStyleLoaders({
importLoaders: 2,
sourceMap: isEnvProduction
? shouldUseSourceMap
: isEnvDevelopment,
},
'less-loader',
{
lessOptions:{
modifyVars: { '@primary-color': '#f9c700' },
javascriptEnabled: true,
}
}
),
sideEffects: true,
},
// Adds support for less Modules
// using the extension .module.less
{
test: lessModuleRegex,
use: getStyleLoaders({
importLoaders: 2,
sourceMap: isEnvProduction
? shouldUseSourceMap
: isEnvDevelopment,
modules: {
getLocalIdent: getCSSModuleLocalIdent,
}
},
'less-loader' )
},
到此不出意外直接 yarn start 就可以看见效果了
