现在假设我们安装好了vue-cli，然后我想在项目中使用SASS怎么办呢？

安装2个项目的依赖包

npm install --save-dev node-sass

npm install --save-dev sass-loader

之后，重新执行npm run dev。

测试1：.vue内部书写

我们在某个.vue文件中加入下面代码测试一下，注意是scss，不是sass，因为SCSS语法使用大括号包裹代码，SASS用缩进，所以SCSS更为流行：

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

当然了，同时我们要对应构建一个组件配合测试：

<div id="header"><div>header</div></div>

结果，果然字色变红，测试成功。就这么简单。

测试2：引入.scss文件

比如我们在某个目录新建了一个var.scss文件，作为变量存放的文件：

$header-color: red;

想要引入这个var.scss文件也很简单，完全是SCSS的语法：

<style lang="scss">
  @import '../../assets/css/var.scss';
  #header {
    div {
      color: $header-color;
    }
  }
</style>

同样的，测试结果也是字色变红。