在webpack自定义配置antd的按需加载和修改主题色

最近使用antd来做react项目的UI。从antd官网上，在使用create-react-app脚手架搭建项目时步骤如下：

（1）添加模块 react-app-rewired, babel-plugin-import, react-app-rewire-less
（2）根目录添加config-overrides.js
（3）修改npm script即可， 一切正常

这里主要说的是自建的react项目中如何配置及其容易出现的坑

一、按需加载

（1）在.babelrc中添加plugins (这里也可以在babel-loader的options中添加)

['import', { 
    libraryName: 'antd', 
    libraryDirectory: 'es',
     style: 'css' 
    }
]
注意该步很容易有报错：
.bezierEasingMixin();Inline JavaScript is not enabled. Is it set in your options?
此时检查package.json中看看less的版本是否是3.x, 如果时降为less@2.7.3
再重启项目，搞定。

二、修改主题色

找到webpack.config.js的less-loader， 在options中添加

{
     loader: 'less-loader',
     options: {
        sourceMap: true,
        modifyVars: {
           'primary-color': '#1DA57A',
           'link-color': '#1DA57A',
           'border-radius-base': '2px'
         },
     javascriptEnabled: true   // 此项不能忘
  }
}

此处有个坑，之前使用ExtractTextPlugin插件对css样式提取，但如配置主题色修改，不能再使用提取插件，另外，找到.babelrc中找到之前按需加载的配置修改：

['import', { 
      libraryName: 'antd', 
      style:  true
   }
]

删除之前的 libraryDirectory: ‘es‘,

修改之前的 style: "css" 为 style: true

修改主题是基于less提供的modifyVars变量进行修改的，所以按需加载时使用true

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://shenqiku.cn/article/FLY_1673