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.写在前面的话 好久没写博客了,诶,好多时候偷懒直接就抓网上的资料丢笔记里了,也就没有自己提炼,偷懒偷懒.然后最近参加了一个网络课程,要交作业的那种,为了能方便看下其他同学的作业,就写了个爬虫把作业 ...
随机推荐
- MySQL数据库中,使用 group by 时,不重复字段如何拼接显示
就不写文字描述了,直接用图和sql来表述吧. 这是测试数据,表名为 person 现在,我想按照性别进行分组,也就是字段 sex ,同时能将分组后的姓名全部显示出来. sql 语句如下: SELECT ...
- 尾插法-实现链表反转(有点bug,以后再来研究下)
def func2(head): p = head.next while p.next: q = p.next p.next = q.next # 重点 head.next = q q.next = ...
- IK 用java 代码实现分词
需要导入IK 对应的jar 包 IKAnalyzer2012.jar lucene-core-4.10.jar public static void main(String[] args) throw ...
- SpringIOC中的注解配置
Spring中的注解是个好东西,可以简化我们的操作,但是使用了注解又会在一定的程度上增加程序的耦合度,xml中的配置写在了类中虽然简化了开发过程,但是或多或少的违背了开闭原则.所以在开发过程中要先明确 ...
- Two-phase Termination 把玩具收拾好再去睡觉。
字面翻译是“两阶段终止”,这个模式用来进行结束操作后,再终止线程.比如我们想停止一个线程,但是让他停止之前必须要做一些清理工作,这时候就需要用到two-phase termination模式. pub ...
- 一个好的mvc5+ef6的学习地址
链接地址: MVC5 + EF6 入门完整教程 感谢这位博主的无私奉献 文章目录列表:http://www.cnblogs.com/miro/p/3777960.html#3673688
- tp5.0x代码执行
1.拿到站首先平复一下心情 看了一下robots.txt结构像dedecms,网站还存在CDN,日了狗看到这里其实都想放弃来着,懒癌晚期,然后接着使用云悉平台走了一波,看了一下得到真实IP,看来只给w ...
- Cookie 干货
从前端开发看Cookie Cookie是浏览器端的存储机制 存在意义: 为了解决“如何记住用户信息”而发明的: 当用户访问网页时,他的名字可以存储在cookie中 下次用户访问该页面时,cookie会 ...
- 从服务器上下载下来的代码,部署到本地时,Url自动带www前缀
fix步骤: 1.网站根目录下,找到.htacess文件,有记事本打开 2.定位到 RewriteCond %{HTTP_HOST} . RewriteCond %{HTTP_HOST} !^www\ ...
- ES5-call,apply,bind的用法
区别bind()与call()和apply()? 1. Function.prototype.bind(obj) : * 作用: 将函数内的this绑定为obj, 并将函数返回2. 面试题: 区别bi ...