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

最新推荐文章于 2023-05-18 16:08:31 发布

转载最新推荐文章于 2023-05-18 16:08:31 发布 · 831 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/hughes5135/p/10163257.html

文章标签：

#webpack #javascript #json #ViewUI

本文详细介绍如何在React项目中整合Ant Design，包括使用create-react-app脚手架的步骤，按需加载组件的方法，以及修改主题色的技巧。同时，解决过程中可能遇到的常见问题，如Less版本冲突和主题定制等。

最近使用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中添加)

1 ['import', { 
2     libraryName: 'antd', 
3     libraryDirectory: 'es',
4     style: 'css' 
5     }
6 ]

　　注意该步很容易有报错：

.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中添加

 1 {
 2      loader: 'less-loader',
 3      options: {
 4         sourceMap: true,
 5         modifyVars: {
 6            'primary-color': '#1DA57A',
 7            'link-color': '#1DA57A',
 8            'border-radius-base': '2px'
 9          },
10      javascriptEnabled: true   // 此项不能忘
11   }
12 }

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

1 ['import', { 
2      libraryName: 'antd', 
3      style:  true
4      }
5 ]

删除之前的 libraryDirectory: 'es',

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

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

主题定制

转载于:https://www.cnblogs.com/hughes5135/p/10163257.html