在react中配置less和less-loader

在react中配置less和sass的方法如下

首先执行命令，npm 执行这个代码。注意，此操作不可逆，执行需慎重：
npm run eject
yarn 执行下面代码：
yarn eject
这个命令主要是为了暴露webpeack配置文件，方便我们修改配置。
执行完毕之后，你可以看到一个config文件夹下的webpack.config.js文件，位置如下

config文件夹下webpack.config.js文件

然后安装less命令
npm i less less-loader --save
这条命令同时安装了less 和 less-loader。
安装完毕之后，打开项目中 config/webpack.config.js 一共修改三处。

在css配置下添加less配置

const lessRegex = /.less$/;

const lessModuleRegex = /.module.less$/;

在getStyleLoaders函数中添加方框内容

lessOptions

{
loader: require.resolve('less-loader'),
options: lessOptions,
}

模仿css代码，添加如下less代码

　
{
test: lessRegex,
exclude: cssModuleRegex,
use: getStyleLoaders({
importLoaders: 1,
sourceMap: isEnvProduction && shouldUseSourceMap,
}),
sideEffects: true,
},
{
test: lessModuleRegex,
use: getStyleLoaders({
importLoaders: 1,
sourceMap: isEnvProduction && shouldUseSourceMap,
modules: true,
getLocalIdent: getCSSModuleLocalIdent,
}),
}