误区,antd按需加载同样是需要先安装antd,只是通过插件的配置实现不用再进行样式的引入,可以直接引用antd组件进行开发
怎样判断按需加载配置成功?通过组件引用的判断,在不引入antd样式的前提下,直接引入,使用组件,看组件样式是否有效,如果生效则按需加载配置成功
完成的配置流程
安装antd
npm i antd --save
npm -s install babel-plugin-import
配置webpack,因为现在的时候,我的webpack是比较新的版本,即是在配置弹出后,没有单独的webpack.dev.js和webpack.prod.js的配置文件,而现在只有一个webpack配置文件
在webpack里面找到babel-loader,因为babel-plugin-import是通过babel的
[
require.resolve('babel-plugin-import'),// 导入 import 插件
{
libraryName: 'antd', //暴露antd
style: 'css'
}
],
配置好之后测试
运行项目看效果
当项目在没有进行弹出的时候,是没有办法看到webpack的配置的,所以这种时候,就需要在另一种情况下进行按需加载的配置
安装插件
npm -s install babel-plugin-import
在根目录下创建一个文件config-overrides.js
文件,config-overrides.js
,添加文件内容如下
const { override, fixBabelImports } = require('customize-cra');
module.exports = override(
fixBabelImports('import', {
libraryName: 'antd',
libraryDirectory: 'es',
style: 'css',
}),
);
注释掉原本的样式引入
主题配置
如果要更改antd主题颜色的话,下面这个style属性值就不能是"css"了。必须改成true,原因是因为值是css时按需加载时加载的就是antd编译后之后的css文件,要更改主题颜色是要更改less变量的,而true标识直接加载antd的less文件
注意,坑来了!!当你设为true时,你会发编译失败,页面中antd组件也会没有样式了,命令行抛出如下异常:
这是因为你还没配置less-loader的配置项,在之前我复制修改的那个地方只是引入使用了less-loader,并没有添加配置项,导致他就会出现这个异常,那么如何配置这个主题。
第一步:将下面这个修改为true
第二步:将下面的红色框代码去掉
第三步:在下面这个地方,去掉红色框代码
修改成如下:
if (preProcessor) {
let loader = {
loader: require.resolve(preProcessor),
options: {
sourceMap: isEnvProduction && shouldUseSourceMap,
},
}
if (preProcessor === 'less-loader') {
loader.options.modifyVars = {
'primary-color': '#000000',
'link-color': '#1DA57A',
'border-radius-base': '2px',
}
loader.options.javascriptEnabled = true
}
loaders.push(loader);
}
最后重启项目运行查看结果: