當我們透過vue-cli來建置專案後，因為預設也會幫我們安裝好webpack打包工具，所以我們可以開始使用scss來撰寫我們的樣式檔，這會讓管理上變得比較方便，所以今天這篇文章就來介紹一下，如何安裝scss編譯器。

首先我們得透過npm來安裝sass-loader和node-sass兩個套件，透過Command Line在專案資料夾中輸入以下指令：

npm install -D sass-loader node-sass

待安裝完成後回到我們前一篇文章中撰寫的App.vue檔案，就可以將原先的CSS：

<template>
    <h1>{{ "Hello World !!!" }}</h1>
</template>
<style>
    h1{
        color: darkblue;
    }
</style>

更改為如下的SCSS：

<template>
    <h1>{{ "Hello World !!!" }}</h1>
</template>
<style lang="scss" scoped>
    $highlightColor: darkblue;
    h1{
        color: $highlightColor;
    }
</style>

可以看到我們是在style標籤內加入了lang=”scss”，另外scoped是指這段樣式僅對這個元件生效，避免一些不必要的干擾，如果要將scss至於外部也沒問題，按照之前提到資料夾定義的概念，我們可以將scss放在./src/assets/scss的資料夾中。

接下來透過下面幾種方式就可以引入到頁面中：

方法一. 在App.vue中引入

<style lang="scss" scoped>
    @import './assets/scss/main.scss';
</style>

或

<style lang="scss" scoped src="./assets/scss/main.scss"></style>

方法二. 透過script匯入

import '@/assets/scss/main.scss';

如此一來就可以在開發專案時透過scss來撰寫我們的樣式表囉！