网上大多都是1.x版本, 很多都过时了. 找了很久才找到解决方案.
首先暴露出配置文件.
yarn eject # 输入 y
yarn add less less-loader
打开config/webpack.config.js
文件. 在常量声明中添加
const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;
在module下的rules下, 添加规则
{
test: lessRegex,
exclude: lessModuleRegex,
use: getStyleLoaders(
{
importLoaders: 2,
sourceMap: isEnvProduction && shouldUseSourceMap
},
'less-loader',
{
javascriptEnabled: true
}
),
sideEffects: true
},
{
test: lessModuleRegex,
use: getStyleLoaders(
{
importLoaders: 2,
sourceMap: isEnvProduction && shouldUseSourceMap,
modules: true,
getLocalIdent: getCSSModuleLocalIdent
},
'less-loader',
{
javascriptEnabled: true
}
)
}
// file loader
其实create-react-app 2.0 内置了sass, 也可以将所有的sass改成less
接下来 通过安装babel-plugin-import
来按需加载
找到babel-loader
{
test: /\.(js|mjs|jsx|ts|tsx)$/,
include: paths.appSrc,
loader: require.resolve('babel-loader'),
options: {
customize: require.resolve(
'babel-preset-react-app/webpack-overrides'
),
plugins: [
[
require.resolve('babel-plugin-named-asset-import'),
{
loaderMap: {
svg: {
ReactComponent: '@svgr/webpack?-svgo![path]',
},
},
},
],
// 加上这条规则
[
"import",
{
libraryName: "antd",
style: true,
}
]
],
//...