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

接下来让我来分享一些我的解决方法,时间:2018.12/18.

1.和网上的一样,我用的是creat-react-app创建的项目,修改主题的方式也是用的:run eject后的项目结构的webpack.config.dev.js修改

第一步:

  1. yarn run eject

 或者

  1. npm run eject  
  2.  
  3. 然后在目录结构就会多一个文件夹

我们要修改的webpack.config.dev.js(开发时)和webpack.config.prod.js(打包时)文件,

但是还要下载几个插件

1.下载babel-plugin-import

2.下载less和less-loader

  1. 1.npm install babel-plugin-import -s
  2.  
  3. 或者
  4. yarn add babel-plugin-import

  

  1. 2.
  2. npm install -s less
  3.  
  4. //less-loader
  5. npm install --save-dev less-loader less
  6.  
  7. 或者
  8.  
  9. yarn add less
  10.  
  11. //less-loader
  12.  
  13. yarn add less-loader

  3.类似下载第三方插件的事就不多说了 进入正题。

1.打开webpack.config.dev.js

如图

先唠叨一下,网上有很多的过时了,比如修改

  1. test: /\.(css)$/,

的,你会发现,根本没有,结构都变了

那是因为

  1. test: /\.(css)$/,

都写成了这样

我也是被坑的很惨,我为此找了好多文档,终于总结出来了,开始

下载好之后,找到这个位置把 plugins改成如下

  1. "plugins": [
  2. ["import", {"libraryName": "antd", "libraryDirectory":"es", "style": true}],
  3. [

  然后ctrl+F 在搜索栏中输入exclude 在exclude中加入/\.less$/,

最后在找到这个位置在rules中的use[]后面加入代码如图

  1. {
  2. test: /\.less$/,
  3. //include: paths.appSrc,
  4. use: [{
  5. loader: "style-loader" // creates style nodes from JS strings
  6. }, {
  7. loader: "css-loader" // translates CSS into CommonJS
  8. }, {
  9. loader: "less-loader",// compiles Less to CSS
  10. options: {
  11. sourceMap: true,
  12. modifyVars: {
  13. 'primary-color': '#1DA57A',
  14. 'link-color': '#1DA57A',
  15. 'border-radius-base': '2px',
  16. },
  17. javascriptEnabled: true,
  18. }
  19. }]
  20. },

  最后重启,效果如图

如果此报错

网上的,我也有这个错误,如果没加/\.less$/,也会包这个错误

  1.  

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. [http 1.1] M-POST

    http://www.brainbell.com/tutors/XML/XML_Book_B/Sending_Messages_Using_M_POST.htm You can restrict me ...

  2. 不论是 Basic Auth 还是 Digest Auth,都会有 Authorization 字段

    GET /dir/index.html HTTP/1.0 Host: localhost Authorization: Digest username="Mufasa", real ...

  3. How to check if directory exist using C++ and winAPI

    如果看文件夹是否存在,必须看返回值是不是 INVALID_FILE_ATTRIBUTES #include <windows.h> #include <string> bool ...

  4. [Inno Setup] 如何读取命令行输入的参数

    以 /verysilent 为例 [Code] var isVerySilent: Boolean; function InitializeSetup(): Boolean; var j: Integ ...

  5. 写给Java程序员的Java虚拟机学习指南

    大家好,我是极客时间<深入拆解Java虚拟机>作者.Oracle Labs高级研究员郑雨迪.有幸借这个专题的机会,能和大家分享为何Java工程师要学Java虚拟机?如何掌握Java虚拟机? ...

  6. JavaWEB开发时FCKeditor类似office界面的ajax框架,加入后就能做界面类似office,能进行简单的文本编辑操作+配置手册...

    2019独角兽企业重金招聘Python工程师标准>>> FCKeditor是一款功能强大的开源在线文本编辑器(DHTML editor),它使你在web上可以使用类似微软Word 的 ...

  7. RHCS图形界面建立GFS共享下

    我们上面通过图形界面实现了GFS,我们这里使用字符界面实现 1.1.       系统基础配置 5台节点均采用相同配置. 配置/etc/hosts文件 # vi /etc/hosts 127.0.0. ...

  8. 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 ...

  9. 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 ...

  10. python-CSV格式清洗与转换、CSV格式列变换、CSV格式数据清洗【数据读入的三种方法】【strip、replace、split、join函数的使用】

    1)CSV格式清洗与转换 描述 附件是一个CSV格式文件,提取数据进行如下格式转换:‪‬‪‬‬‪‬‮‬‪‬‭‬ (1)按行进行倒序排列:‪‬‪‬‪‬‪‬‪‬‮‬‬‪‬‮‬‪‬‭‬ (2)每行数据倒序排 ...