使用create react app是没有less配置的,需要我们去手动配置
1、执行npm run eject,暴露webpack.config.js
但是在执行时报:This git repository has untracked files or uncommitted changes。解决方法,提交到git,执行命令:1)git add . 2)git commit -m “” 3)再执行npm run eject
2、 安装less和less-loader:npm install less-loader less --save
3、修改webpack.config.js文件,
1)在本文件中搜索sassModuleRegex关键词,进行如下配置
// 配置less
const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;
2)在本文件中搜索oneof关键字,进行如下配置,将sass文件配置改为如下
// less
{
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
4、重启项目,发现报错如下:
报错原因: less-loader版本过高,我执行npm安装时安的是10.0的版本,执行npm install less-loader@6.0.0 进行降级处理,再次执行即可运行