react 配置 less 以及按需加载 和css 作用域

react脚手架如何配置less和ant按需加载的方法步骤

这篇文章主要介绍了react脚手架如何配置less和ant按需加载的方法步骤，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

前言

create-react-app是由React官方提供并推荐使用构建新的React单页面应用程序的最佳方式,其构建的项目默认是不支持less的,需要我们手动集成

一、react脚手架搭建

1、先全局安装create-react-app(提前需要安装node)
npm install -g create-react-app

2、然后通过create-react-app创建项目my-app

create-react-app my-app

3、最后通过cd进入项目文件夹并启动
cd my-app

yarn start 或者 ``
4、终端出现如下界面表示启动成功，并在浏览器中输入http://localhost:3000/即可看到react的初始页面

[图片上传失败...(image-eec089-1584752838969)]

二、目录结构

|

1

2

3

4

5

6

7

|

┌─node_modules -依赖包

├─public -全局文件

├─src -项目文件

├─.gitignore -提交被git忽略文件目录

创建成功.png

├─package.json -项目配置文件

├─README.md -README文件

└─yarn.lock -锁定项目所需的各种配置版本

|

三、安装less和less-loader(less编译器)
yarn add less less``-loader

安装完成之后该怎么配置呢？这时需要通过webpack来配置less-loader，但是我们在上面的目录结构中似乎并没有发现webpack.config.js文件，这是因为脚手架为了实现“零配置”，会默认把一些通用的脚本和配置集成到 react-scripts，目的是让我们专注于src目录下的开发工作，不再操心环境配置。同时，被其集成的脚本和配置也会从程序目录中消失 ，程序目录也会变得干净许多

接下来，我们就需要通过yarn eject将webpack配置暴露出来

四、暴露webpack配置

执行yarn eject

提示：执行该命令后会把已构建依赖项、配置文件和脚本复制到程序目录中。该操作是不可逆转的，执行完成后会删除这个命令，也就是说只能执行一次

配置完成之后，我们会发现我们的目录结构中会多出两个文件夹：

image.png

其中config文件夹，有三个关于 webpack 的配置文件：

• webpack.config.dev.js 开发环境配置
• webpack.config.prod.js 生产环境配置
• webpackDevServer.config.js 开发服务器配置
• 当 使用 16.0 的版本之后就config 名字改了
  五、修改webpack配置文件*

第一步：到webpack.config.js文件中找到如下代码，在sassModuleRegex后面加上lessRegex和lessModuleRegex变量

image.png

第二步：在下面加上这两段代码

image.png

六、集成Ant Design 并配置按需加载

antd：是蚂蚁金服推出的一个很优秀的react UI库，其中包含了很多我们经常使用的组件，对于小白学习react来说十分友好！

1、首先需要安装antd

yarn add antd

2、安装完成之后我们就可以直接在代码里使用它的ui组件了

import {Button} from 'antd'``;

import 'antd/dist/antd.css'``;

这个方法的优点是比较简单，不需再次配置，直接加载即可，但是比较麻烦，每次载入一个新的组件都需要先载入组件，再加载组件的css文件，性能较差

3、使用 babel-plugin-import 来进行按需加载
yarn add babel-plugin-import --save-dev
4、安装完成之后，在package.json中找到babel配置项，然后再里面加上plugins

image.png

注意： 这里babel配置项是需要通过yarn eject暴露出来才会有，原本的package.json是没有这个配置项的

5、最后只需从antd引入模块即可，无需单独引入样式, babel-plugin-import会帮助你加载 JS 和 CSS
import {Button} from 'antd'``;
6、关于antd的按需加载其实还有其他的方法，官方推荐使用react-app-rewired来实现antd的按需加载
详见: https://ant.design/docs/react/use-with-create-react-app-cn#%E9%AB%98%E7%BA%A7%E9%85%8D%E7%BD%AE

**七 . 样式作用域

只需要 创建一个 index.module.less 在里面写样式 在需要的地方引入

image.png