我们一般都是通过create-react-app
命令来创建的react项目,但是这种方式创建默认是对sass
的配置,是没有less
的配置的,所以我们就需要自己配置一下。
一、webpack配置文件
我们用脚手架创建的项目默认是看不到webpack配置文件的,怎么能找到webpack配置文件呢,我们可以在package.json
文件中可以看到运行命令
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
前三个都是经常用的就不用说了,那么说最后一行命令,就是让webpack配置文件给暴露出来。
在终端运行命令npm run eject
或yarn eject
但是事事不如意,我们有可能会出现下列错误:
这是因为我们在使用脚手架创建一个项目的时候,默认会给我增加一个.gitignore
文件,而我们本地却没有文件仓库,这就需要我们在终端输入命令git add .
和git commit -m 修改
把项目添加到本地仓库。
当以上都执行完毕以后,在次执行npm run eject
或yarn eject
就没有问题了。成功的截图如下:
暴露配置之后在项目里会增加一个config
文件夹,一个scripts
文件夹,并且原来的package.json
文件内容会变更多。
二、安装less和less-loader
webpack不能识别less所以要安装相应的loader来把less解析成css。
在终端中输入npm install less-loader less --save
或yarn add less-loader less --save
三、修改webpack配置文件
我们在项目根目录中找到刚才生成的config
文件,找到里面的webpack.config.js
这个文件:
然后搜索sassRegex
就可以找到如下代码:
这个就是脚手架默认配置了css和sass的配置变量,我们一样新增less的正则,照葫芦画瓢,把sass的两个变量复制一下修改成less的
const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;
接着再搜索sassRegex
,声明了变量肯定要用,可以找到如下代码:
找到的代码就是默认的sass配置相关的代码,按照上面的方法新增变量的方法,复制sass配置的相关部分,一共两个,把他修改成less的配置代码如下:
// Opt-in support for less (using .scss or .sass extensions).
// By default we support less Modules with the
// extensions .module.less
{
test: lessRegex,
exclude: lessModuleRegex,
use: getStyleLoaders(
{
importLoaders: 3,
sourceMap: isEnvProduction && shouldUseSourceMap,
},
'less-loader'
),
// Don't consider CSS imports dead code even if the
// containing package claims to have no side effects.
// Remove this when webpack adds a warning or an error for this.
// See https://github.com/webpack/webpack/issues/6571
sideEffects: true,
},
// Adds support for CSS Modules, but using less
// using the extension .module.less
{
test: lessModuleRegex,
use: getStyleLoaders(
{
importLoaders: 3,
sourceMap: isEnvProduction && shouldUseSourceMap,
modules: {
getLocalIdent: getCSSModuleLocalIdent,
},
},
'less-loader'
),
},
这样就配置完less了,接着就可以重启项目就可以开心的写我们的less了。\
如果遇到报错# bezierEasingMixin(); Inline JavaScript is not enabled. Is it set in your options
,说明less
版本高于3.X,请看这篇文章解决传送门。
接下来可以看这篇文章配置less全局变量,react中如何使用less配置全局变量,或复制链接 https://juejin.cn/post/7051476074693132296/
查看。