在creat-react-app搭建的项目环境中按需引入antd以及配置less,首先需要暴露出来webpack文件。(此操作不可逆)。

create-react-app myapp 创建同一个react项目

yarn add antd less less-loader babel-plugin-import 需要配置的 less 和 babel依赖

暴露wenpack文件的指令是yarn eject.  在使用这个指令之前要先推送一次git文件才行。或者删除git文件

提交git :

git add .

git commit -m 'xxxx'

git push

然后再yarn eject

运行之后会询问是否暴露,输入y即可。

此时在项目目录下会多出一个config文件夹。,

当你运行项目的时候你会发现报错 : 缺少@babel/plugin-syntax-jsx文件

//执行命令
yarn add @babel/plugin-syntax-jsx

然后在config文件夹里面找webpack.config.js文件在大概345行处添加代码

['import',{libraryName:'antd', style:true}],

在大概455行处添加代码

 {
test: /\.less$/,
use: [{
loader: "style-loader"
}, {
loader: "css-loader"
}, {
loader: "less-loader",
options: {
sourceMap: true,
modifyVars: {
'@primary-color': '#f9c700',  //修改antd主题色
},
javascriptEnabled: true,
}
}]
},

然后重启项目,就可以按需引入antd、引入less文件了。并且主题色也变为了修改的#f9c700色。

引入一个Button按钮来举个例子:

App.js文件:

import React from 'react';
import { Button } from 'antd'
import './app.less'
function App() {
return (
<div>
<Button className="button" type="primary">按需引入antd和配置less</Button>
</div>
);
} export default App;

app.less文件:

 .button{
margin: 100px;
}

 效果图:

creat-react-app搭建的项目中按需引入antd以及配置Less和如何修改antd的主题色的更多相关文章

  1. 【已解决】React项目中按需引入ant-design报错TypeError: injectBabelPlugin is not a function

    react项目中ant-design按需加载,使用react-app-rewired的时候报错 运行npm start或者yarn start报如下错误: TypeError: injectBabel ...

  2. 在vue-cli搭建的项目中增加后台mock接口

    用vue-cli搭建一个前端开发环境确实是极其方便,在写前端代码肯定也是少不了需要调用后台提供的业务接口进行前后端交互,特别在敏捷开发中,前后端都要提前确定业务接口并进行打桩,在开发过程中基本是没有现 ...

  3. 在vue-cli搭建的项目中在后台mock接口中支持req.body和req.cookies

    在<vue-cli搭建的项目中增加后台mock接口>中实现了后台mock,但是前端post的t数据都要在mock的后台接口中使用req的接收数据事件获取http协议body中的数据. re ...

  4. create-react-app 搭建的项目中,使用 CSS Modules

    create-react-app 搭建的项目中,使用 CSS Modules: 修改config目录下 webpack.config.dev.js 和 webpack.config.prod.js 文 ...

  5. Vue项目中jQuery的引入

    1.安装jQuery依赖 npm install jquery --save-dev 2.在webpack.base.conf.js头部加入如下代码 var webpack = require(&qu ...

  6. React Native 在现有项目中的探路

    移动开发中,native开发性能和效果上无疑是最好的. 但是在众多的情况下,native开发并不是最优的选择.当需求经常改动的时候,当预算有限的时候,当deadline很近的时候,native开发的成 ...

  7. netcore项目中使用 SpringCloudConfig 和apollo做配置中心

    版权所有,转载请注明出处 https://www.cnblogs.com/netqq/p/14251403.html 一.使用apollo作为配置中心 首先apollo 项目简介和安装请自行百度,本文 ...

  8. 夺命雷公狗---node.js---19之项目的构建在node+express+mongo的博客项目4mongodb在项目中的基本引入

    首先我们在命令行下先建立这个库: 然后我们在项目中引入mongodb的模块: var MongoClient = require('mongodb').MongoClient; var DB_STR ...

  9. ANT 发布项目中 build.xml 文件的详细配置

    xml 代码 <?xml version="1.0" encoding="UTF-8"?> <!-- name:对应工程名字 default: ...

随机推荐

  1. LVM-扩容目录

    LVM LVM是一种源自Unix环境,在Linux上广泛应用的逻辑虚拟盘存储方案.借助LVM,可以在保证各个Linux目录分区稳定,又可以实现各目录存储资源灵活分配. 本文主要系统介绍Linux环境下 ...

  2. Pyhton第八节 字典补充

    Python 字典的基本元素是键值对(key-value), 每个键值对的key和value之间用:分割:每个键值对之间用,分割:整个键值对用花括号{}包围 字典内的键(key)必须唯一,值不需要唯一 ...

  3. 2018-8-10-win10-uwp-ApplicationView

    title author date CreateTime categories win10 uwp ApplicationView lindexi 2018-08-10 19:16:53 +0800 ...

  4. Hession实现远程通讯(基于Binary-RPC协议)

    一.开发工具 1.jdk1.6 64位 百度网盘地址:https://pan.baidu.com/s/1Zwqfmi20X4ANNswZzPMzXQ 提取码:k50r 2.apache-maven-3 ...

  5. windows10 注销 锁定

    锁定,暂时离开电脑时使用. 跑程序,下载内容(注意有时要修改一些软件的设置)继续进行. 锁定电脑,这时就不要关机. 注销快于重启. 一个账号 后台跑程序 https://zhidao.baidu.co ...

  6. bzoj 3207 可持久化线段树+hash

    这道题要看出来这个做法还是比较容易说一下细节 1.因为要用hash的区间值域来建树,而hash为了不冲突要开的很大,所以值域就会比较的大,不过这道题好的一点是没有修改,所以直接离散一下就会小很多 2. ...

  7. linux IPC 消息队列

    消息队列函数原型 在建立IPC通讯时(如消息队列,共享内存)必须建立一个ID值.通常情况下,这个ID值由ftok函数得到 #inlcude <sys/types.h> #include & ...

  8. Ajax请求参数为文件类型

    1.图片用get请求,回调函数中返回的数据就是流文件(至于是什么流文件还不清楚), 在回调函数中再使用post请求2.JS将文件像form表单一样提交到后台  :  https://www.cnblo ...

  9. js总结体会

    1.表单元素提交之后(不刷新)数据还是会存在的,想要提交之后清除数据可以在ajax提交数据后,用reset()方法清除数据. 2.js中怎么判断哪个单选控件被选中了呢,即表单控件被选中哪些属性发生了变 ...

  10. “今日头条杯”首届湖北省大学程序设计竞赛(网络同步赛 )--E. DoveCCL and Resistance

    题目描述:链接点此 这套题的github地址(里面包含了数据,题解,现场排名):点此 链接:https://www.nowcoder.com/acm/contest/104/D来源:牛客网 题目描述 ...