1. 先安装less-loader
cnpm install less less-loader --save-dev
2.暴露webpack配置文件
cnpm run eject
3.修改webpack.config.js文件配置
const cssRegex = /\.css$/;
const cssModuleRegex = /\.module\.css$/;
const sassRegex = /\.(scss|sass)$/;
const sassModuleRegex = /\.module\.(scss|sass)$/;
添加以下代码
const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;
{
test: lessRegex,
exclude: lessModuleRegex,
use: getStyleLoaders(
{
importLoaders: 1,
sourceMap: isEnvProduction && shouldUseSourceMap,
},
),
sideEffects: true,
},
{
test: lessModuleRegex,
use: getStyleLoaders(
{
importLoaders: 1,
sourceMap: isEnvProduction && shouldUseSourceMap,
modules: true,
getLocalIdent: getCSSModuleLocalIdent,
},
),
},
4.找到getCSSModuleLocalIdent.js文件,添加上less
const fileNameOrFolder = context.resourcePath.match(
/index\.module\.(css|scss|sass|less)$/
)
5.引入less文件,查看效果即可。