react16.8 antd按需加载配置(已经弹出和未弹出分别的配置)以及主题配置

误区,antd按需加载同样是需要先安装antd,只是通过插件的配置实现不用再进行样式的引入,可以直接引用antd组件进行开发

怎样判断按需加载配置成功?通过组件引用的判断,在不引入antd样式的前提下,直接引入,使用组件,看组件样式是否有效,如果生效则按需加载配置成功

 

 

完成的配置流程

安装antd

npm i antd --save

安装babel-plugin-import插件

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);
    }

最后重启项目运行查看结果:

 

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值