Antd 修改主题颜色填坑记录
首先,让我想说的是,现在有很多的更新,网上的一些也有的没用了,
接下来让我来分享一些我的解决方法,时间:2018.12/18.
1.和网上的一样,我用的是creat-react-app创建的项目,修改主题的方式也是用的:run eject后的项目结构的webpack.config.dev.js修改
第一步:
yarn run eject
或者
npm run eject 然后在目录结构就会多一个文件夹
我们要修改的webpack.config.dev.js(开发时)和webpack.config.prod.js(打包时)文件,
但是还要下载几个插件
1.下载babel-plugin-import
2.下载less和less-loader
1.npm install babel-plugin-import -s 或者
yarn add babel-plugin-import
2.
npm install -s less //less-loader
npm install --save-dev less-loader less 或者 yarn add less //less-loader yarn add less-loader
3.类似下载第三方插件的事就不多说了 进入正题。
1.打开webpack.config.dev.js
如图
先唠叨一下,网上有很多的过时了,比如修改
test: /\.(css)$/,
的,你会发现,根本没有,结构都变了
那是因为
test: /\.(css)$/,
都写成了这样
我也是被坑的很惨,我为此找了好多文档,终于总结出来了,开始
下载好之后,找到这个位置把 plugins改成如下
"plugins": [
["import", {"libraryName": "antd", "libraryDirectory":"es", "style": true}],
[
然后ctrl+F 在搜索栏中输入exclude 在exclude中加入/\.less$/,
最后在找到这个位置在rules中的use[]后面加入代码如图
{
test: /\.less$/,
//include: paths.appSrc,
use: [{
loader: "style-loader" // creates style nodes from JS strings
}, {
loader: "css-loader" // translates CSS into CommonJS
}, {
loader: "less-loader",// compiles Less to CSS
options: {
sourceMap: true,
modifyVars: {
'primary-color': '#1DA57A',
'link-color': '#1DA57A',
'border-radius-base': '2px',
},
javascriptEnabled: true,
}
}]
},
最后重启,效果如图
如果此报错
网上的,我也有这个错误,如果没加/\.less$/,也会包这个错误
Antd 修改主题颜色填坑记录的更多相关文章
- 三、create-react-app新旧版中使用less和antd并修改主题颜色
引入less 如果项目根目录中没有config文件夹,首先暴露出项目配置文件,项目下执行: npm run eject 如果项目是从git仓库中pull下来的的话,必须确保本地项目与仓库中没有冲突,才 ...
- webapp填坑记录[更新中]
网上也有许多的 webapp 填坑记录了,这几个月,我在公司正好也做了2个,碰到了一些问题,所以我在这里记录一下我所碰到的问题: meta 头部声明在开发的时候,刚刚创建 HTML 文件,再使用浏览器 ...
- webapp填坑记录
网上也有许多的 webapp 填坑记录了,这几个月,我在公司正好也做了2个,碰到了一些问题,所以我在这里记录一下我所碰到的问题: meta 头部声明在开发的时候,刚刚创建 HTML 文件,再使用浏览器 ...
- Linux踩坑填坑记录
Linux踩坑填坑记录 yum安装失败[Errno 14] PYCURL ERROR 6 - "Couldn't resolve host 'mirrors.aliyun.com'" ...
- Phoenix踩坑填坑记录
Phoenix踩坑填坑记录 Phoenix建表语句 如何添加二级索引 判断某表是否存在 判断索引是否存在 Date类型日期,条件判断 杂项 记录Phoenix开发过程中的填坑记录. 部分原文地址:ph ...
- Kafka踩坑填坑记录
Kafka踩坑填坑记录 一.kafka通过Java客户端,消费者无法接收消息,生产者发送失败消息 二. 一.kafka通过Java客户端,消费者无法接收消息,生产者发送失败消息 在虚拟机上,搭建了3台 ...
- eleemnt-ui修改主题颜色
饿了吗的element-ui使用的是淡蓝色的主题,有时候我们可以自定义主题,官方的文档给我们提供了如何修改主题,介绍的很详细,自己试验过后,觉得很不错,一方面怕忘记,一方面写一写. 方法一是在线生成一 ...
- F2eTest和uirecorder自动化测试环境部署填坑记录
坑1:尝试部署的时候只在opennode.bat里面填写了两个浏览器,测试通过后再增加其他浏览器,页面上一直不显示. 填坑:需要清空数据库里的`wd_browsers`和`wd_nodes`表,然后重 ...
- Hexo博客skapp主题部署填坑指南
相信大家都很喜欢 hexo skapp 的主题,由于作者采用结巴分词,加上需要依赖各种各样的环境 所以可能大家踩过很多坑,也许每个人踩得坑不一样,这里使用 Docker 容器 centos 来部署, ...
随机推荐
- 日志分析工具ELK(一)
一.ELK介绍 1.1 elasticsearch 1.1.1 elasticsearch介绍 ElasticSearch是一个基于Lucene的搜索服务器.它提供了一个分布式多用户能力的全文搜索引擎 ...
- Linux发送邮件命令mail,mutt
邮件常常是Linux下监控报警手段之一.Linux下的mail命令可以方便,快速的完成发送邮件. 1. Linux发邮件2种常见客户端命令 1.1 mail命令(推荐) 语法: 无邮件正文 mail ...
- 更新mac系统到10.15后,virtual box虚拟机无法打开
更新mac系统到10.15后,virtual box虚拟机无法打开: 尝试解决方案1:下载最新版的virtual box重新安装后,启动成功. 虽然很乌龙,但是下次再也不随便升级系统了,太坑爹了
- 限流 - Guava RateLimiter
2019独角兽企业重金招聘Python工程师标准>>> 限流 限流的目的是通过对并发访问/请求进行限速或者一个时间窗口内的的请求进行限速来保护系统,一旦并发访问/请求达到限制速率或者 ...
- 源码学习VUE之Observe
在文章 源码学习VUE之响应式原理我们大概描述了响应式的实现流程,主要写了observe,dep和wather的简易实现,以及推导思路.但相应代码逻辑并不完善,今天我们再来填之前的一些坑. Obser ...
- 搭建vsftpd文件服务器并创建虚拟用户
一.安装 1. 查看是否安装vsftpd rpm -qa | grep vsftpd 2. 安装 yum -y install vsftpd ...
- Pig设计模式概要以及与SQL的设计模式的对比
2019独角兽企业重金招聘Python工程师标准>>> 1概要模式 概要模式其实就是数据的全貌信息的获取,主要分为3种: 1.1数值概要 #HSQL SELECT MIN(num), ...
- 图论--2-SAT--暴力染色法求字典序最小模版
#include <cstdio> #include <cstring> #include <stack> #include <queue> #incl ...
- python selenium(用例断言)
1.if ...else ...判断进行断言 from time import * from selenium import webdriver "): driver = webdriver ...
- .net core 基于Dapper 的分库分表开源框架(core-data)
一.前言 感觉很久没写文章了,最近也比较忙,写的相对比较少,抽空分享基于Dapper 的分库分表开源框架core-data的强大功能,更好的提高开发过程中的效率: 在数据库的数据日积月累的积累下,业务 ...