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 来部署, ...
随机推荐
- [http 1.1] M-POST
http://www.brainbell.com/tutors/XML/XML_Book_B/Sending_Messages_Using_M_POST.htm You can restrict me ...
- 不论是 Basic Auth 还是 Digest Auth,都会有 Authorization 字段
GET /dir/index.html HTTP/1.0 Host: localhost Authorization: Digest username="Mufasa", real ...
- How to check if directory exist using C++ and winAPI
如果看文件夹是否存在,必须看返回值是不是 INVALID_FILE_ATTRIBUTES #include <windows.h> #include <string> bool ...
- [Inno Setup] 如何读取命令行输入的参数
以 /verysilent 为例 [Code] var isVerySilent: Boolean; function InitializeSetup(): Boolean; var j: Integ ...
- 写给Java程序员的Java虚拟机学习指南
大家好,我是极客时间<深入拆解Java虚拟机>作者.Oracle Labs高级研究员郑雨迪.有幸借这个专题的机会,能和大家分享为何Java工程师要学Java虚拟机?如何掌握Java虚拟机? ...
- JavaWEB开发时FCKeditor类似office界面的ajax框架,加入后就能做界面类似office,能进行简单的文本编辑操作+配置手册...
2019独角兽企业重金招聘Python工程师标准>>> FCKeditor是一款功能强大的开源在线文本编辑器(DHTML editor),它使你在web上可以使用类似微软Word 的 ...
- RHCS图形界面建立GFS共享下
我们上面通过图形界面实现了GFS,我们这里使用字符界面实现 1.1. 系统基础配置 5台节点均采用相同配置. 配置/etc/hosts文件 # vi /etc/hosts 127.0.0. ...
- Codeforces Round 623(Div. 2,based on VK Cup 2019-2020 - Elimination Round,Engine)D. Recommendations
VK news recommendation system daily selects interesting publications of one of n disjoint categories ...
- Codeforces Round #530 (Div. 1) 1098A Sum in the tree
A. Sum in the tree Mitya has a rooted tree with nn vertices indexed from 11 to nn, where the root ha ...
- python-CSV格式清洗与转换、CSV格式列变换、CSV格式数据清洗【数据读入的三种方法】【strip、replace、split、join函数的使用】
1)CSV格式清洗与转换 描述 附件是一个CSV格式文件,提取数据进行如下格式转换: (1)按行进行倒序排列: (2)每行数据倒序排 ...