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.写在前面的话 好久没写博客了,诶,好多时候偷懒直接就抓网上的资料丢笔记里了,也就没有自己提炼,偷懒偷懒.然后最近参加了一个网络课程,要交作业的那种,为了能方便看下其他同学的作业,就写了个爬虫把作业 ...
随机推荐
- Docker Api 实测
好久没写博客,工作中想着未来部门需要对docker进行维护相对麻烦,而且,网络上也缺少一些合适的项目,于是准备筹划自己动手.先找到了Docker 的API文档,地址是:https://docs.doc ...
- 拾遗:Perl 正则表达式
三种正则模式: 匹配:m//,其中前缀 m 可省略 替换:s/// 转化:tr/// 操作符: =~:存在匹配项则返回结果 !~:不存在匹配项则返回结果 修饰符: i:忽略大小写,如:s/.../.. ...
- 基于三角形与位置指纹识别算法的WiFi定位比较
文章来着:https://wenku.baidu.com/view/55d1f4146edb6f1aff001fec.html
- 20140319 const sizeof define 编译时分配内存
1.面试宝典预处理,const,sizeof Define作用定义函数: //用一个宏定义FIND求一个结构体struc里某个变量相对于struc的偏移量,如FIND(student,a)//等于0 ...
- Japan 2005 Domestic Cleaning Robot /// BFS 状压 二进制位运算 结构体内构造函数 oj22912
题目大意: 输入w h,接下来输入h行w列的图 ' . ':干净的点: ' * ' :垃圾: ' x ' : 墙: ' o ' : 初始位置: 输出 清理掉所有垃圾的最短路径长度 无则输出-1 ...
- eclipse导出说明文档
选中项目--右键--Export--Java--Javadoc—Finish 1.为程序添加文档注释 2.选中项目--右键Export--Java--Javadoc--next, 3.next--在V ...
- 如何优雅的在 vue 中添加权限控制
前言 在一个项目中,一些功能会涉及到重要的数据管理,为了确保数据的安全,我们会在项目中加入权限来限制每个用户的操作.作为前端,我们要做的是配合后端给到的权限数据,做页面上的各种各样的限制. 需求 因为 ...
- 【JZOJ6288】旋转子段
description analysis 可以先用前缀和把原串不调整的方案数先求出来 对于一种翻转,肯定是把\([i..a[i]]\)或\([a[i]..i]\)这段区间翻转 也可以看做是以\({i+ ...
- 校园商铺-2项目设计和框架搭建-7验证Dao
以最简单的地区表为例 1.插入数据 insert into tb_area (area_name, priority) values('东苑', 1),('南苑', 7),('北苑', 5); sel ...
- 背包dp+打表处理——cf999F
考虑每种c都是可以独立进行计算的,所以这题的答案等价于每种c的最优解之和 计算每种c的最优解:把问题转化成求出每种c的最大值,再转化成i个人分j张卡片的最大收益 dp[i,j]表示i个人分j张卡片的最 ...