在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. 集中式日志系统 ELK 协议栈详解

    简介 在我们日常生活中,我们经常需要回顾以前发生的一些事情:或者,当出现了一些问题的时候,可以从某些地方去查找原因,寻找发生问题的痕迹.无可避免需要用到文字的.图像的等等不同形式的记录.用计算机的术语 ...

  2. 逻辑回归原理,推导,sklearn应用

    目录 逻辑回归原理,推导,及sklearn中的使用 1 从线性回归过渡到逻辑回归 2 逻辑回归的损失函数 2.1 逻辑回归损失函数的推导 2.2 梯度下降法 2.3 正则化 3 用逻辑回归进行多分类 ...

  3. SpringMVC 与axis2 的整合(服务器端)

    1,新建一个web project项目,项目的目录 如下: 2,导入需要的jar包,本例用的是axis2 1.7.3版本. 3,创建接口. package com.dsdl.hcm.webServic ...

  4. Rendering Problems The following classes could not be found:- android.support.v7.internal.app.WindowDecorActionBar (Fix Build Path, Create Class)

    如图出现如下的错误的时候,一般都是升级Androdi Studio 后导致的,引入库不全,或者其他 东西缺少 可以如下解决方案:

  5. Apache Shiro反序列化远程代码执行

    一.漏洞利用 wget https://raw.githubusercontent.com/sv3nbeast/ShiroScan/master/moule/ysoserial.jar 反弹shell ...

  6. JAVA基础学习-多态 对象转型 final

    一.多态的产生条件 1:继承  存在继承的类之间 2:方法重装 3:父类继承子类重装的方法 子类的对象 也是属于父类的 二:对象的转型 1:向上转型:当子类转型成父类时 例如:Animal a = n ...

  7. celery中配置redis密码时的ValueError: invalid literal for int() with base 10: 'xxxx'

    原配置: celery_broker = 'redis://:xxxx#xxxx@172.17.0.1:6379/0' # docker0 错误原因: 密码中不能有 # ? 等特殊字符 (无语O__O ...

  8. vue之路由导航守卫-全局前置守卫

    一.使用方式 全局前置守卫用于在路由配置生效之前进行一些动作,可以使用 router.beforeEach 注册一个全局前置守卫: const router = new VueRouter({ ... ...

  9. Cesium指南针

    cesium里面没有指南针 需要安装其他的插件: cesium-navigation-es6 npm i cesium-navigation-es6 -S 安装好之后在mainjs里引入 import ...

  10. 管理员技术(七): Linux管理员 综合测试

    一.Linux管理员 综合测试 目标: 根据本文提供的练习步骤完成所有练习案例. 方案: 开始练习之前,先依次重置虚拟机环境. [root@room9pc13 ~]# rht-vmctl  reset ...