React中引入less
- 官方的 create-react-app创建的项目默认是不支持 less 的,但是你又想 使用less咋办,有2个方式
第一
- 使用第三方的脚手架,推荐使用蚂蚁金服的脚手架
- dva
- umi
第二
- 先老实创建一个项目,此流程 可以看我 上一篇文章 传送门
- 第二步,安装 Less
npm i less less-loader --save
-
别以为这样就完了,因为react 默认是不支持的,你要webpack 去修改配置,由于默认创建是所有都是简介化的,如下
-
如何看到webpack 配置了, 打开你的 package.json 里面有一个
"eject": "react-scripts eject"
- 使用npm 或者yarn 去运行 它,然后后续操作点击Y, 此操作是不可逆的,你点击确定就好
npm eject或者 yarn eject
- 然后找到 此目录 webpack.config.js
. - 首先配置支持Less 注释的地方是默认的地方,后面添加less
- 别以为这样就完了,下面还有操作,使webpack 编译less,添加一下此处的代码就好
好了,react中编译less 已经完成,青春还长,与你共勉,有问题可以加微信了解