在react中如何使用sass与less?

4,772 阅读1分钟

前言:

最近在学习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