sass是css的预处理器，扩展了css语言，提供了规则、变量、混入、选择器、继承、内置函数等特性，有助于减少CSS重复的代码，节省开发时间。为了在Vue中使用sass需要安装sass-loader和sass的依赖环境node-sass和sass。

1 安装环境

直接执行下面的语句安装就行了：

npm install -D node-sass sass sass-loader

如果发现报错了Syntax Error: TypeError: this.getOptions is not a function，是由于包的版本过高不匹配造成的，解决办法：把之前安装的包卸载了，建议按照下面提供的版本安装:

npm install node-sass@^7.0.1
npm install sass@^1.49.9
npm install sass-loader@^7.3.1

如果安装node-sass失败了，多半是由于github的环境不稳定造成的，多试几次就好了。

至此sass所需的环境就安装好了！安装完成之后需要重启一下项目，然后去style标签中加上lang='sass'试试效果吧！

2 使用全局变量

2.1 配置全局变量文件

一般为了便于统一管理项目的样式，我们需要定义一些全局变量。如果你需要使用sass/scss语法定义一些全局的内容需要在项目根目录的vue.config.js文件（如果没有这个文件直接创建一个即可）下加上如下代码：注意了旧版本的sass-loader使用的是data字段，新版本的sass-loader使用的是prependData字段，我用的版本是旧版的。

module.exports = {
    css: {
        loaderOptions: {
            sass: {
            	// 这里的值是你的全局变量文件路径，如果有多个全局变量用逗号分割开即可，如：
            	// data: `@import"~@/assets/scss/main.scss";@import"~@/assets/scss/mixins/util.scss"`
                data: '@import "~@/style/global.scss";'
            }
        }
    }
};

编辑好之后重启项目配置即可生效。

2.2 使用全局变量

例如，在全局变量文件global.css中定义了一个颜色：

$color-primary: blue;

由于已经配置了全局变量的路径，在项目中可以直接访问这些全局变量了：

h1 {
	color: $color-primary;
}