react-create-app脚手架新建的项目
执行yarn enject并选择yes
项目多一个config文件夹
ant组件按需加载
webpack.config.js中添加配置:
{
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,+titleProp,+ref![path]'
}
}
}
],
// 此处为新增: Ant Design 按需加载
[
'import',
{
libraryName: 'antd',
//此处改为true 配置主题定制
style: true
}
]
],
cacheDirectory: true,
cacheCompression: false,
compact: isEnvProduction
}
},
安装less
yarn add less less-loader --save
webpack.config.js中添加配置:
// 引入 Less 配置(ant主题定制theme)
{
test: /\.less$/,
use: [
'style-loader',
'css-loader',
{
loader: 'less-loader',
options: {
sourceMap: true,
//此处配置皮肤属性
modifyVars: { '@primary-color': '#1890ff' },
//true
javascriptEnabled: true
}
}
]
},
皮肤属性列表:github.com/ant-design/…
