目前创建react项目一般使用 create-react-app 这个脚手架工具来创建，但这种方式默认没有对于less的配置。所以我们自己配置一下：
1. 暴露出webpack配置文件
使用create-react-app 创建的项目默认是看不到webpack配置文件的，需要先暴露出来，然后才能修改里面的配置信息。
终端运行一下命令（注意：此命令一旦运行会修改package.json 文件，不可回退）
npm run eject
2. 安装less和less-loader
运行以下命令：
npm install less-loader less --save
如果遇到安装失败的情况，请改用cnpm。
3. 修改webpack配置文件
运行完以上命令后，项目根目录下会多出一个 config 文件夹，找到里面的 webpack.config.js 这个文件
image
3.1 增加less配置1
找到下面这段代码
image
在这下面直接添加以下代码：
const lessRegex = /.less$/;
const lessModuleRegex = /.module.less$/;
道理大家应该懂：webpack里配置了css和sass，我们想用less就需要加入less配置。
3.2 增加less配置2
在此文件中搜索 oneof
3.png
可以看到关于sass部分的配置，那我们再加入less的相关配置：先复制一份，将sass部分修改为less，再加入oneOf数组。
把我的复制出来，大家可以直接用：
{
test: lessRegex,
exclude: lessModuleRegex,
use: getStyleLoaders(
{
importLoaders: 2,
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 SASS
// using the extension .module.scss or .module.sass
{
test: lessModuleRegex,
use: getStyleLoaders(
{
importLoaders: 2,
sourceMap: isEnvProduction && shouldUseSourceMap,
modules: true,
getLocalIdent: getCSSModuleLocalIdent,
},
'less-loader'
),
},
这样就配置完成，可以直接使用less了。
作者：LilyLaw
链接：https://www.jianshu.com/p/d5dd8b108461
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。