前言:
最近在学习react,脚手架是用官方推荐的create-react-app 创建的。想在react中使用sass与less,发现跟vue不同的是,并不是你安装依赖就可以使用的,还需要在webpack中进行配置,当然这是针对less来说的~
使用Sass:
create-react-app 创建的 react项目,默认就是支持Sass的,使用只需要安装一下 node-sass 这个包即可使用
npm install node-sass -D
使用Less:
create-react-app 创建的 react项目,不支持less,所以我们要对webpack进行配置
第一步:暴露webpack的配置
react项目,webpack配置默认是隐藏的,要想修改,必须先把它暴露出来:
npm run eject
第二步:更改webpack的配置
打开 config -> webpack.config.js ,
如图也验证了create-react-app 创建的 react项目,默认就是支持Sass的,我们只需复制一份sass的相关配置,然后修改成less就好,这是第一处修改
如图,这是webpack默认的sass的配置,同样只需要复制一份,将sass改成less即可,修改如下图,这是第二处修改
两处修改完保存即可。
第三步:安装依赖包
npm install less less-loader --save
第四步:运行项目,即可使用less
npm start