最近使用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

主题定制

新版create-react-app脚手架中修改antd主题配置

(1) 引入UI库

 注意,这里import后面是一个对象,而不是数组

(2) 添加less的正则

(3) 在sass规则后面添加less规则

(4) 修改getStyleLoaders方法

改成

注意less版本还需使用2.7.3

重启项目,完成修改。

在webpack自定义配置antd的按需加载和修改主题色的更多相关文章

  1. webpack配置antd的按需加载

    安装babel-plugin-import插件.下面方法二选一,都可以实现antd的按需加载. 一.配置webpack.config.js文件 { test: /.jsx?$/, exclude: / ...

  2. react antd样式按需加载配置以及与css modules模块化的冲突问题

    通过create-react-app脚手架生成一个项目 然后运行npm run eject 把webpack的一些配置从react-scripts模块弹射出来, 方便自己手工增减,暴露出来的配置文件在 ...

  3. webpack css模块化和ant-design按需加载冲突

    其实具体出现了什么问题,我也记得不清楚了,今天突然回想起来必须记录一下,一个思想就是用exclude将node_module目录下的文件排除,网上有很多相关例子,但不知是不是因为时间久远,都不生效,无 ...

  4. Vue + WebPack + Typescript初学者VSCode项目 (按需加载、跨域调试、await/async)

    万事开头难,一个好的Hello World程序可以节省我们好多的学习时间,帮助我们快速入门.Hello World程序之所以是入门必读必会,就是因为其代码量少,简单易懂.但我觉得,还应该做到功能丰富, ...

  5. webpack:代码分割与按需加载

    代码分割就是我们根据实际业务需求将代码进行分割,然后在合适的时候在将其加载进入文档中. 代码中总有些东西我们希望拆分开来,比如: 使用概率较低的模块,希望后期使用的时候异步加载 框架代码,希望能利用浏 ...

  6. antd中按需加载使用react-app-rewired报错

    [描述] 按照antd官网步骤 https://ant.design/docs/react/use-with-create-react-app-cn 最后yarn start会报错 [解决方法] 原因 ...

  7. React引入AntD按需加载报错

    背景:React使用create-react-app脚手架创建,然后yarn run eject暴露了配置之后修改less配置, 需求:实现antd组件按需加载与修改主题. 一开始是按照webpack ...

  8. Ant Design React按需加载

    Ant Design是阿里巴巴为React做出的组件库,有统一的样式及一致的用户体验 官网地址:https://ant.design 1.安装: npm install ant --save 2.引用 ...

  9. ant-design如果按需加载组件

    Ant Design React按需加载 Ant Design是阿里巴巴为React做出的组件库,有统一的样式及一致的用户体验 官网地址:https://ant.design 1.安装: npm in ...

随机推荐

  1. xcrun: error: unable to find utility "PackageApplication", not a developer tool or in PATH

    Xcode升级到8.3后 用命令进行打包 提示下面这个错误 xcrun: error: unable to find utility "PackageApplication", n ...

  2. [skill][vim] 常用技巧与配置

    一:  光标行列高亮 可以使用 :help highlight 查看相信帮助可颜色配置. set cursorline set cursorcolumn highlight Cursorline ct ...

  3. mysql学习【第5篇】:事务索引备份视图

    狂神声明 : 文章均为自己的学习笔记 , 转载一定注明出处 ; 编辑不易 , 防君子不防小人~共勉 ! mysql学习[第5篇]:事务索引备份视图 MySQL事务 事务就是将一组SQL语句放在同一批次 ...

  4. Androidstudio_LinearLayout

  5. base64简单使用

    加密: import base64 import random str ="aqwertyuiopasdfghjklzxcvbnm963.0852741,.;'" a = '人生苦 ...

  6. tensorflow入门笔记(五) name_scope和variable_scope

    一.上下文管理器(context manager) 上下文管理器是实现了上下文协议的对象,主要用于资源的获取与释放.上下文协议包括__enter__.__exit__,简单说就是,具备__enter_ ...

  7. 不看好运维竖井产品模式,优云打造融合化运维PaaS平台

    2018年1月13号中国双态运维用户大会上,优云软件总裁刘东海接受了36Kr记者的专访,期间谈到了新时代下的企业运维模式,新兴技术和传统运维的融合以及优云未来的发展方向等问题.以下为访谈实录: 优云软 ...

  8. 【PyQt5-Qt Designer】对话框系列

    标准输入对话框(QInputDialog)系列: 主要模块 from PyQt5.QtWidgets import QInputDialog 效果如下: 完整代码: from PyQt5.QtWidg ...

  9. sql server 复制常见问题及查看

    1.SQL Server同步复制问题排查方法http://blog.csdn.net/roy_88/article/details/41481059 2.[同步复制常见错误处理1]当IDENTITY_ ...

  10. OC动画:CAKeyframeAnimation

    // 方法一 用法1​ Value方式 //创建动画对象 CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyP ...