首先,让我想说的是,现在有很多的更新,网上的一些也有的没用了,

接下来让我来分享一些我的解决方法,时间: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 修改主题颜色填坑记录的更多相关文章

  1. 三、create-react-app新旧版中使用less和antd并修改主题颜色

    引入less 如果项目根目录中没有config文件夹,首先暴露出项目配置文件,项目下执行: npm run eject 如果项目是从git仓库中pull下来的的话,必须确保本地项目与仓库中没有冲突,才 ...

  2. webapp填坑记录[更新中]

    网上也有许多的 webapp 填坑记录了,这几个月,我在公司正好也做了2个,碰到了一些问题,所以我在这里记录一下我所碰到的问题: meta 头部声明在开发的时候,刚刚创建 HTML 文件,再使用浏览器 ...

  3. webapp填坑记录

    网上也有许多的 webapp 填坑记录了,这几个月,我在公司正好也做了2个,碰到了一些问题,所以我在这里记录一下我所碰到的问题: meta 头部声明在开发的时候,刚刚创建 HTML 文件,再使用浏览器 ...

  4. Linux踩坑填坑记录

    Linux踩坑填坑记录 yum安装失败[Errno 14] PYCURL ERROR 6 - "Couldn't resolve host 'mirrors.aliyun.com'" ...

  5. Phoenix踩坑填坑记录

    Phoenix踩坑填坑记录 Phoenix建表语句 如何添加二级索引 判断某表是否存在 判断索引是否存在 Date类型日期,条件判断 杂项 记录Phoenix开发过程中的填坑记录. 部分原文地址:ph ...

  6. Kafka踩坑填坑记录

    Kafka踩坑填坑记录 一.kafka通过Java客户端,消费者无法接收消息,生产者发送失败消息 二. 一.kafka通过Java客户端,消费者无法接收消息,生产者发送失败消息 在虚拟机上,搭建了3台 ...

  7. eleemnt-ui修改主题颜色

    饿了吗的element-ui使用的是淡蓝色的主题,有时候我们可以自定义主题,官方的文档给我们提供了如何修改主题,介绍的很详细,自己试验过后,觉得很不错,一方面怕忘记,一方面写一写. 方法一是在线生成一 ...

  8. F2eTest和uirecorder自动化测试环境部署填坑记录

    坑1:尝试部署的时候只在opennode.bat里面填写了两个浏览器,测试通过后再增加其他浏览器,页面上一直不显示. 填坑:需要清空数据库里的`wd_browsers`和`wd_nodes`表,然后重 ...

  9. Hexo博客skapp主题部署填坑指南

    相信大家都很喜欢 hexo skapp 的主题,由于作者采用结巴分词,加上需要依赖各种各样的环境 所以可能大家踩过很多坑,也许每个人踩得坑不一样,这里使用 Docker 容器 centos 来部署, ...

随机推荐

  1. 日志分析工具ELK(一)

    一.ELK介绍 1.1 elasticsearch 1.1.1 elasticsearch介绍 ElasticSearch是一个基于Lucene的搜索服务器.它提供了一个分布式多用户能力的全文搜索引擎 ...

  2. Linux发送邮件命令mail,mutt

    邮件常常是Linux下监控报警手段之一.Linux下的mail命令可以方便,快速的完成发送邮件. 1. Linux发邮件2种常见客户端命令 1.1 mail命令(推荐) 语法: 无邮件正文 mail ...

  3. 更新mac系统到10.15后,virtual box虚拟机无法打开

    更新mac系统到10.15后,virtual box虚拟机无法打开: 尝试解决方案1:下载最新版的virtual box重新安装后,启动成功. 虽然很乌龙,但是下次再也不随便升级系统了,太坑爹了

  4. 限流 - Guava RateLimiter

    2019独角兽企业重金招聘Python工程师标准>>> 限流 限流的目的是通过对并发访问/请求进行限速或者一个时间窗口内的的请求进行限速来保护系统,一旦并发访问/请求达到限制速率或者 ...

  5. 源码学习VUE之Observe

    在文章 源码学习VUE之响应式原理我们大概描述了响应式的实现流程,主要写了observe,dep和wather的简易实现,以及推导思路.但相应代码逻辑并不完善,今天我们再来填之前的一些坑. Obser ...

  6. 搭建vsftpd文件服务器并创建虚拟用户

    一.安装     1. 查看是否安装vsftpd         rpm -qa | grep vsftpd     2. 安装          yum -y install vsftpd      ...

  7. Pig设计模式概要以及与SQL的设计模式的对比

    2019独角兽企业重金招聘Python工程师标准>>> 1概要模式 概要模式其实就是数据的全貌信息的获取,主要分为3种: 1.1数值概要 #HSQL SELECT MIN(num), ...

  8. 图论--2-SAT--暴力染色法求字典序最小模版

    #include <cstdio> #include <cstring> #include <stack> #include <queue> #incl ...

  9. python selenium(用例断言)

    1.if ...else ...判断进行断言 from time import * from selenium import webdriver "): driver = webdriver ...

  10. .net core 基于Dapper 的分库分表开源框架(core-data)

    一.前言 感觉很久没写文章了,最近也比较忙,写的相对比较少,抽空分享基于Dapper 的分库分表开源框架core-data的强大功能,更好的提高开发过程中的效率: 在数据库的数据日积月累的积累下,业务 ...