React中引入less

版权声明：原创不易，多多珍惜 https://cloud.tencent.com/developer/article/1454205

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

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

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

 "eject": "react-scripts eject"

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

 npm eject或者 yarn eject

1. 然后找到 此目录 webpack.config.js .

1. 首先配置支持Less 注释的地方是默认的地方，后面添加less

1. 别以为这样就完了，下面还有操作，使webpack 编译less，添加一下此处的代码就好

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

传送门底部有微信