React默认脚手架新增Less支持

React默认脚手架新增Less支持

前言

通过React默认脚手架(create-react-app)创建出的项目默认是不支持less作为css预编译工具的。
如需支持有两种方式：
1、通过执行命令 yarn eject 将脚手架预先封闭的Webpack等配置工具的源文件暴露出来自行添加;
2、使用customize-cra、react-app-rewired对配置进行扩展。

因为官方之所以封闭部分配置肯定是有它原因的，这里我还是采取第二种方式。

执行步骤:

安装 customize-cra、react-app-rewired依赖

yarn add customize-cra react-app-rewired --save-dev

安装less依赖

yarn add less less-loader@5.0.0  --save-dev

注意这里的less-loader版本是5.0.0,不设置版本后续运行会报错，参考最底下的github的issues

创建config-overrides文件

在项目的根目录下创建名称为config-overrides的文件。不需要加js后缀。如下图:

再将下面代码复制到文件内

const?{
????override,
????addLessLoader,
??}?=?require(‘customize-cra‘);
??
??module.exports?=?override(
????addLessLoader({??
??????javascriptEnabled:?true,
??????ModifyVars:?{‘@primary-color‘:?‘#1DA57A‘},?
??????sourceMap:true,
????}),
??)

更新package.json

还需要将package.json文件内scripts节点的start、build更新为下面的样子

????"start":?"react-app-rewired?start",
????"build":?"react-app-rewired?build",

使用less

将脚手架内原有的css文件更改为less格式，在js或jsx内引入。

如less样式代码如下:

@h1Color:?red;
.App?{
??text-align:?center;
}
div?{
??h1?{
????color:?red;
??}
}
.App-logo?{
??height:?40vmin;
??pointer-events:?none;
}
@media?(prefers-reduced-motion:?no-preference)?{
??.App-logo?{
????animation:?App-logo-spin?infinite?20s?linear;
??}
}
.App-header?{
??background-color:?#282c34;
??min-height:?100vh;
??display:?flex;
??flex-direction:?column;
??align-items:?center;
??justify-content:?center;
??font-size:?calc(10px?+?2vmin);
??color:?white;
}
.App-link?{
??color:?#61dafb;
}
@keyframes?App-logo-spin?{
??from?{
????transform:?rotate(0deg);
??}
??to?{
????transform:?rotate(360deg);
??}
}

js代码如下:

import?React?from?‘react‘;
import?logo?from?‘./logo.svg‘;
import?style?from‘./App.less‘;
function?App()?{
??return?(
??<div>
????<h1>Hello,Word</h1>??
??</div>)
}
export?default?App;

运行结果如下:

参考:
https://github.com/ant-design/ant-design/issues/23624

React默认脚手架新增Less支持

原文：https://www.cnblogs.com/hunanzp/p/13179549.html