React中引入less

React中引入less

• 官方的 create-react-app创建的项目默认是不支持 less 的，但是你又想 使用less咋办，有2个方式

第一

• 使用第三方的脚手架，推荐使用蚂蚁金服的脚手架
  • dva

https://github.com/dvajs/dva

• umi

https://umijs.org/

第二

1. 先老实创建一个项目，此流程 可以看我 上一篇文章 传送门
2. 第二步，安装 Less

   npm i  less less-loader --save

3. 别以为这样就完了，因为react 默认是不支持的，你要webpack 去修改配置，由于默认创建是所有都是简介化的，如下
   

4. 如何看到webpack 配置了， 打开你的 package.json 里面有一个

 "eject": "react-scripts eject"

5. 使用npm 或者yarn 去运行 它，然后后续操作点击Y, 此操作是不可逆的，你点击确定就好

 npm eject或者 yarn eject

6. 然后找到 此目录 webpack.config.js
   .
7. 首先配置支持Less 注释的地方是默认的地方，后面添加less
   
8. 别以为这样就完了，下面还有操作，使webpack 编译less，添加一下此处的代码就好
   

好了，react中编译less 已经完成，青春还长，与你共勉，有问题可以加微信了解

传送门底部有微信