安装 antd UI组件 执行以下代码:
//安装 antd
yarn add antd
//安装UI组件css样式
yarn add babel-plugin-import
在wabpack.config.js中替换以下代码
//修改less模块,添加antd less-loader 解析
{
test: /\.less$/,
use: [{
loader: 'style-loader',
}, {
loader: 'css-loader', // translates CSS into CommonJS
}, {
loader: 'less-loader', // compiles Less to CSS
options: {
modifyVars: {//修改后的主题色
'@warning-color': '#fa3118',
'@primary-color': '#fa3118',
},
javascriptEnabled: true,
},
}],
// ...other rules
},
//替换的目的是解析antd UI组件的css和less样式和按需加载antd 组件
{
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?-prettier,-svgo![path]',
},
},
},
],
//这是新添加的
[require.resolve('babel-plugin-import'), { libraryName: 'antd', style: true }]
],
// 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,
cacheCompression: isEnvProduction,
compact: isEnvProduction,
},
},
需要注意的问题是:webpack.config.js中的js|mjs|jsx|ts|tsx模块中的[require.resolve(‘babel-plugin-import’), { libraryName: ‘antd’, style: true }] style 必须为true 才可以正确修改ant中的全局样式
Plugins:[
[require.resolve('babel-plugin-import'), { libraryName: 'antd', style: true }]
]