在 vue 项目中使用 sass 或 less

一、vue 项目中安装 sass 并使用
第一步：打开终端 cd 到项目目录，安装 sass 依赖包：

npm install sass-loader --save-dev
npm install node-sass --sava-dev

第二步：在 build 文件夹下的 webpack.base.conf.js 文件中的 rules 里面添加配置：

{
	test: /\.scss$/,
	loaders: ['style', 'css', 'sass']
}

第三步：使用 scss 时候在所在的 style 样式标签上添加 lang=”scss” 即可应用对应的语法，否则报错：

<style lang="scss">
	$color: red;
	div {
		color: $color;
	}
</style>

如果运行时报以下错误：Module build failed: TypeError: this.getResolve is not a function at Object.loader
原因是：sass-loader的版本太高，降低版本即可。

卸载当前版本 npm uninstall sass-loader
安装 npm install sass-loader@7.3.1 --save-dev

二、vue 项目中安装 less 并使用
第一步：打开终端 cd 到项目目录，安装 less 依赖：

npm install less less-loader --save

第二步：在 build 文件夹下的 webpack.base.conf.js 文件中的 rules 里面添加配置：

{
	test: /\.less$/,
	loader: "style-loader!css-loader!less-loader",
}

第三步：使用 less 时候在所在的 style 样式标签上添加 lang=”less” 即可应用对应的语法，否则报错：

<style lang="less">
	@color: red;
	div {
		color: @color;
	}
</style>