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.写在前面的话 好久没写博客了,诶,好多时候偷懒直接就抓网上的资料丢笔记里了,也就没有自己提炼,偷懒偷懒.然后最近参加了一个网络课程,要交作业的那种,为了能方便看下其他同学的作业,就写了个爬虫把作业 ...
随机推荐
- JQuery validate验证规则
//定义中文消息 var cnmsg = { required: “必选字段”, remote: “请修正该字段”, email: “请输入正确格式的电子邮件”, url: “请输入合法的网址”, d ...
- 大道浮屠诀---cwRsync同步工具的使用
目的: 在日常生活中,我们有时候会遇到这样类似的问题 ---需要把一台服务器上的某个重要的文件进行备份(拷贝另外的服务器上) ---需要同步系统上的配置文件到其他系统 利用此cwRsync软件可以解决 ...
- JavaScript——问卷星自动填写
一.前言: 我们学校要刷学术章,有些学术章又是指定在某个时间点填写问卷星的问卷报名的.但是由于我手速慢,导致总会有些时候报不上名,于是想着搞个代码实现自动填写问卷星的报名表.一顿操作后,在github ...
- java面试官如何面试别人
java面试官如何面试别人(一) j ...
- mysql中重复数据只取条
select * from table_a where id in (select min(id) from table_a group by a) )) SUBSTRING_INDEX(cids,' ...
- python 通过zabbix api获得所有主机的ip
#!/usr/bin/env python3 #coding=utf-8 import jsonimport requests#from urllib import requests, parse,e ...
- Linux 常用命令:文本查看篇
前言 Linux常用命令中,除了cat还有很多其他用于文本查看的命令.本文将简单介绍一下这些文本查看的命令. 全文本显示--cat cat可能是常用的一个文本查看命令了,使用方法也很简单: cat f ...
- Android 开发 框架系列 OkHttp文件上传功能实现(含断点续传)
前言 此篇博客只是上传功能的记录demo,如果你还不太了解okhttp可以参考我的另一篇博客https://www.cnblogs.com/guanxinjing/p/9708575.html 代码部 ...
- css---文本新增样式
opacity属性指定了一个元素的透明度 默认值:1.0 不可继承 兼容性不是太好 兼容性写法 opacity{ opacity:0.5; filter:alpha(opacity=); //f ...
- Hadoop配置lzo
编译: 0. 环境准备 maven(下载安装,配置环境变量,修改sitting.xml加阿里云镜像) gcc-c++ zlib-devel autoconf automake libtool 通过yu ...