dvajs+antd定制主题踩坑记录
记一下刚刚解决的问题,困扰了几周,期间困兽争斗,甚至想放弃antd组件库。终于出来了,人类科技又进步了(才怪)。
首先我按照dva官网建立了项目。里面引入antd的各种组件,因为需要用到一个switch开关组件,但是颜色不是我想要的颜色,首先我F12查到是“.ant-switch-checked”这个class,出于我只是想改个按钮选中颜色的想法,我决定在全局class里写上新的“ant-switch-checked”来覆盖这个主题默认的按钮色,结果试了了各种:globle @import等方式都不行,加上发现load等颜色也需要修改,未来还有其他组件需要改,只好向文档低头。
根据adtd官网的定制主题https://ant.design/docs/react/customize-theme-cn,修改了packagejson.当然是没有用的。辗转搜索发现要改.webpack,config.js。哦,改就改吧,可是dvacli创建的项目根本没有这个文件。后来翻了一下文档,看见了说要改.roadnogrc,也是没有的文件。再翻,发现dva作者更新了,把.roadnogrc迁移到了.webpackrc。所以改webpackrc可以,webpackrc里内容要改成这个样子,才能定制主题。style不能是css,要是true。
{
"theme": {
"@primary-color": "#fd8249"
},
"extraBabelPlugins": [
["import", { "libraryName": "antd", "libraryDirectory": "es", "style": true}]
]
}
改了这个文件颜色是不是就能用了呢?天真!你会发现有报错:Inline JavaScript is not enabled。谷歌了一下大佬们说把less的版本改到2.x.x可行,抱着试一试的心态,重新npm,发现主题颜色真的改成功了,喜大普奔……
改后的package.json

中途我还尝试了antdmobile。然后发现我想要用switch组件还要引入一个rcfrom。觉得不如antd方便,就放弃了这个做法。以后可能还是要学,到时候再看吧。
dvajs+antd定制主题踩坑记录的更多相关文章
- 你真的了解字典(Dictionary)吗? C# Memory Cache 踩坑记录 .net 泛型 结构化CSS设计思维 WinForm POST上传与后台接收 高效实用的.NET开源项目 .net 笔试面试总结(3) .net 笔试面试总结(2) 依赖注入 C# RSA 加密 C#与Java AES 加密解密
你真的了解字典(Dictionary)吗? 从一道亲身经历的面试题说起 半年前,我参加我现在所在公司的面试,面试官给了一道题,说有一个Y形的链表,知道起始节点,找出交叉节点.为了便于描述,我把上面 ...
- SpringBoot+SpringSecurity+Thymeleaf认证失败返回错误信息踩坑记录
Spring boot +Spring Security + Thymeleaf认证失败返回错误信息踩坑记录 步入8102年,现在企业开发追求快速,Springboot以多种优秀特性引领潮流,在众多使 ...
- manjaro xfce 18.0 踩坑记录
manjaro xfce 18.0 踩坑记录 1 简介1.1 Manjaro Linux1.2 开发桌面环境2 自动打开 NumLock3 系统快照3.1 安装timeshift3.2 使用times ...
- [技术博客]iview组件样式踩坑记录
[技术博客]iview组件样式踩坑记录 iview官方文档. 在本次项目开发中,前端项目主要使用vue框架+iview组件构建,其中iview组件在使用过程中遇到了许多官方文档中没有明确说明或是很难注 ...
- DevOps落地实践点滴和踩坑记录-(2) -聊聊平台建设
很久没有写文章记录了,上一篇文章像流水账一样,把所见所闻一个个记录下来.这次专门聊聊DevOps平台的建设吧,有些新的体会和思考,希望给正在做这个事情的同学们一些启发吧. DevOps落地实践点滴和踩 ...
- unionId突然不能获取的踩坑记录
昨天(2016-2-2日),突然发现系统的一个微信接口使用不了了.后来经查发现,是在网页授权获取用户基本信息的时候,unionid获取失败导致的. 在网页授权获取用户基本信息的介绍中(http://m ...
- CentOS7.4安装MySQL踩坑记录
CentOS7.4安装MySQL踩坑记录 time: 2018.3.19 CentOS7.4安装MySQL时网上的文档虽然多但是不靠谱的也多, 可能因为版本与时间的问题, 所以记录下自己踩坑的过程, ...
- ubuntu 下安装docker 踩坑记录
ubuntu 下安装docker 踩坑记录 # Setp : 移除旧版本Docker sudo apt-get remove docker docker-engine docker.io # Step ...
- SpringBoot + Shiro + shiro.ini 的踩坑记录
0.写在前面的话 好久没写博客了,诶,好多时候偷懒直接就抓网上的资料丢笔记里了,也就没有自己提炼,偷懒偷懒.然后最近参加了一个网络课程,要交作业的那种,为了能方便看下其他同学的作业,就写了个爬虫把作业 ...
随机推荐
- jq页面换肤效果
<!DOCTYPE html> <html lang="en"> <head> <script src="http://code ...
- Mybatis 使用的 9 种设计模式,真是太有用了~
Java技术栈 ) { name = fullname.substring(0, delim); children = fullname.substring(delim + 1); ...
- python批量运行py文件
import os path="E:\\python" #批量的py文件路径 for root,dirs,files in os.walk(path): #进入文件夹目录 for ...
- MySQL 07章_子查询
子查询就是查询中还可以嵌套其他的查询,通常是内层查询的结果作为外层查询的条件来使用 执行循序,自内向外依次执行 一.内层查询返回“单列单行”的结果 -- 1.查询宋江的出生日期 SELECT TIME ...
- LightOJ 1342 Aladdin and the Magical Sticks 期望(结论题)
题目传送门 题意:n根木棍,每根木棍都有一个权值,木棍有可识别的木棍和不可识别的木棍,每次抽取木棍时,会累加权值,如果是可识别的木棍就不放回,不可识别的木棍就放回,问每根木棍至少被抽取一次,权值的期望 ...
- Erlang学习记录:app demo
目录结构 │ Emakefile │ make.bat │ start.bat ├─config │ config.config │ server.app ├─ebin │ wulin_app.bea ...
- redis笔记_源码_字典dict
参考:https://redissrc.readthedocs.io/en/latest/datastruct/dict.html Expand: 条件: 新的table 大小: Rehash: 条件 ...
- 使用Intellij中的Spring Initializr来快速构建Spring Boot工程
本文将介绍嵌入的Intellij中的Spring Initializr工具,它同Web提供的创建功能一样,可以帮助我们快速的构建出一个基础的Spring Boot/Cloud工程. 1.菜单栏中选择F ...
- thinkphp 多层mvc
hinkPHP基于MVC(Model-View-Controller,模型-视图-控制器)模式,并且均支持多层(multi-Layer)设计. 模型(Model)层 默认的模型层由Model类构成,但 ...
- VC 复制移动删除重命名文件文件
说明: 1.以下封装了4个函数_CopyFile,_DeleteFile,_MoveFile,_ReNameFile 2.每个函数都先拷贝了原来的路径,保证了路径是以2个\0\0结尾.(如果不以2个\ ...