二、create-react-app自定义配置
这里主要讲解添加less 和 实现Antd按需加载
首选需要执行npm run eject 暴露所有内建的配置 ,这是后面所有配置的基础,这个必须优先执行!
一、实现Antd按需加载
按需加载插件。只需要引入模块即可,无需单独引入样式。
import {Button} from 'antd';
ReactDom.render(
<div>
<Button>
XXXX
</Button>
</div>);
1. 使用babel-plugin-import实现Antd按需加载,修改package.json,或者在项目根目录新建文件.babelrc写配置,注意是二选一。
首先执行以下命令安装 babel-plugin-import
npm install babel-plugin-import --save-dev
1)、修改package.json
"babel": {
"presets": [
"react-app"
],
"plugins": [
[
"import",
{
"libraryName": "antd",
"style": true
}
]
]
}
2)、修改.babelrc
{
"presets": [
"react-app"
],
"plugins": [
[
"import",
{
"libraryName": "antd",
"style": true
}
]
]
}
注意: 不要认为package.json里已有presets配置这里就不用写,这里的.babelrc会覆盖package.json里带有的babel配置,如果删除presets配置,会报错。
二、引入Less
1)安装less-loader 和 less
npm install less-loader less --save-dev
2)修改config文件夹下的webpack.config.dev.js和webpack.config.prod.js文件(都需要修改)
查找 :exclude
原本的 exclude: [/\.js$/, /\.html$/, /\.json$/],
修改为 exclude: [/\.html$/, /\.(js|jsx)$/, /\.(css|less)$/, /\.json$/, /\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
查找:test: /.css$/
原本的 test: /\.css$/,
修改为 test: /\.(css|less)$/,
在这个test的下面找到use,添加loader
use: [
{...},
{...},
{
loader: require.resolve('less-loader') // compiles Less to CSS
}
]
参考地址:
https://blog.csdn.net/zhaoyu_m69/article/details/78800887
https://segmentfault.com/a/1190000012881473
https://blog.csdn.net/qq_35809834/article/details/72670220
二、create-react-app自定义配置的更多相关文章
- 如何扩展 Create React App 的 Webpack 配置
如何扩展 Create React App 的 Webpack 配置 原文地址https://zhaozhiming.github.io/blog/2018/01/08/create-react-a ...
- 深入 Create React App 核心概念
本文差点难产而死.因为总结的过程中,多次怀疑本文是对官方文档的直接翻译和简单诺列:同时官方文档很全面,全范围的介绍无疑加深了写作的心智负担.但在最终的梳理中,发现走出了一条与众不同的路,于是坚持分享出 ...
- 在 .NET Core 5 中集成 Create React app
翻译自 Camilo Reyes 2021年2月22日的文章 <Integrate Create React app with .NET Core 5> [1] Camilo Reyes ...
- tap news:week5 0.0 create react app
参考https://blog.csdn.net/qtfying/article/details/78665664 先创建文件夹 安装create react app 这个脚手架(facebook官方提 ...
- 使用create react app教程
This project was bootstrapped with Create React App. Below you will find some information on how to ...
- Create React App
Facebook开源了React前端框架(MIT Licence),也同时提供了React脚手架 - create-react-app. create-react-app遵循约定优于配置(Coc)的原 ...
- Create React App 安装less 报错
执行npm run eject 暴露模块 安装 npm i less less-loader -D 1.打开 react app 的 webpack.config.js const sassRege ...
- create react app的 css loader 进行局部配置
{ test: cssRegex, exclude: cssModuleRegex, use: getStyleLoaders({ importLoaders: 1, sourceMap: isEnv ...
- [React] Use the Fragment Short Syntax in Create React App 2.0
create-react-app version 2.0 added a lot of new features. One of the new features is upgrading to Ba ...
- [React] {svg, css module, sass} support in Create React App 2.0
create-react-app version 2.0 added a lot of new features. One of the new features is added the svgr ...
随机推荐
- overflow属性的应用
在使用JQueryUI chosen插件的时候,由于页面布局的原因,下拉列表框超出div范围,图形效果严重变形,一点解决的思路都没有,最后请教公司前端,瞬间解决,原来使用CSS 中的overflow属 ...
- scarky test
- MyBatis学习笔记二:MyBatis生产中使用环境搭建
这里是在上一个环境的基础上修改的,这里就不在给出所有的配置,只给出哪里修改的配置 1.修改POJO对象为注解方式 2.创建Dao层接口 package com.orange.dao; import c ...
- 吴裕雄--天生自然KITTEN编程:小猫解题
作品链接:https://ide.codemao.cn/we/36447034
- iPhone X价格下跌!用户依旧冷眼相看为哪般?
X价格下跌!用户依旧冷眼相看为哪般?" title="iPhone X价格下跌!用户依旧冷眼相看为哪般?"> 其实对于刚刚过去的2017年手机市场来说,根本没有一款 ...
- Python---7函数(调用&定义函数)
函数 Python内置了很多有用的函数,我们可以直接调用. 要调用一个函数,需要知道函数的名称和参数,比如求绝对值的函数abs(),只有一个参数.可以直接从Python的官方网站查看文档: http: ...
- Parentheses Balance (括号平衡)---栈
题目链接:https://vjudge.net/contest/171027#problem/E Yes的输出条件: 1. 空字符串 2.形如()[]; 3.形如([])或者[()] 分析: 1.设置 ...
- Linux统计目录下文件个数及代码行数
1. 统计当前目录下,php文件数量 find ./ -name "*.php" | wc -l 2. 统计当前目录下所有php文件代码行数 find ./ -name " ...
- Android 添加framework资源包
为Android系统添加一个新的资源包 概述 传统的Android系统只有一个framework-res.apk资源包,第三方厂商在进行rom定制时会直接修改framework res资源,达到适配目 ...
- Shell之Here Document
EOF本意是 End Of File,表明到了文件末尾. 使用格式基本是这样的: 命令 << EOF 内容段EOF将“内容段”整个作为命令的输入.你的代码里就是用cat命令读入整段字符串并 ...