在 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>

二、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>