在vue-cli或react脚手架中使用css预编译语言

Vue

使用vue-cli创建的项目，若要使用less，只需要下载less和less-loader即可，不需要变更webpack配置

npm i less less-loader@5.0.0 -S

less-loader的版本不能过高，否则会出错

React

安装less和less-loader

npm i less less-loader -S

更改webpack.config.js配置
react脚手架中有对SASS的支持，仿照着添加以下代码

//将正表达式抽出
const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;


//在module中的rules内添加以下规则，第一个规则是针对 .less 文件的
//第二个规则是针对 .module.less 文件的
{
     
	test: lessRegex,
 	exclude: lessModuleRegex,
 	use: getStyleLoaders(
 		{
     
 			importLoaders: 3,
     		sourceMap: isEnvProduction && shouldUseSourceMap,
 		},
 		"less-loader"
 	)
 },   		
{
     
	test: lessModuleRegex,
	use: getStyleLoaders(
		{
     
			importLoaders: 3,
			sourceMap: isEnvProduction && shouldUseSourceMap,
			modules: {
     
  				getLocalIdent: getCSSModuleLocalIdent,
			},
		},
		'less-loader'
	),
}