Vue项目引入Css预处理 -- Sass

1、安装依赖

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

2、在build文件夹下的webpack.base.conf.js的rules里面添加配置

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

3、在.vue文件里修改style标签

<style lang="scss" scoped>
// 根据scss规则，写入css样式
div{
	background: #ffffff;
	p{
		color: #2c3e50;
	}
}
</style>

tips：sass-loader的版本过高导致的编译错误，当前最高版本是8.x，需要退回到7.3.1

运行：

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