react坑--使用less
在使用create-react-app时发现不支持less,需更手动更改。
1、下载less less-loader
// 使用npm
npm install less less-loader -D
// 使用 yarn
yarn add less less-loader
2、配置webpack.config.js
在这里如果项目中没有webpack.config.js此文件的,可以执行npm run eject
,如果执行报错,则执行以下命令
git add .
git commit -m "init"
npm run eject
在webpack.config.js文件中是可以看到对sass的配置的,在sass配置的后面复制一份,改成less的配置就可以了。
// style files regexes
const cssRegex = /\.css$/;
const cssModuleRegex = /\.module\.css$/;
const sassRegex = /\.(scss|sass)$/;
const sassModuleRegex = /\.module\.(scss|sass)$/;
//新建less配置:
const lessRegex = /\.(less|less)$/;
const lessModuleRegex = /\.module\.(less|less)$/;
//在module中找到rules下的oneOf 并在sass后添加如下配置
{
test: lessRegex,
exclude: lessModuleRegex,
use: getStyleLoaders(
{
importLoaders: 3,
sourceMap: isEnvProduction
? shouldUseSourceMap
: isEnvDevelopment,
},
'less-loader'
),
sideEffects: true,
},
{
test: lessModuleRegex,
use: getStyleLoaders(
{
importLoaders: 3,
sourceMap: isEnvProduction
? shouldUseSourceMap
: isEnvDevelopment,
modules: {
getLocalIdent: getCSSModuleLocalIdent,
},
},
'less-loader'
),
}
3、配置后运行报错TypeError:this.getOptions is not a function
错误原因:8.0+版本的less-loader的配置方法发生了变化,导致报错
解决方法:安装低版本的less-loader
// 使用npm
npm install less-loader@5.0.0 -D
// 使用 yarn
yarn add less-loader@5.0.0 -D