Vue.jsでSassを使用する方法

Vue.jsでScssを使用したらエラーが出たので解決方法をまとめておきます。

複数の方法があるらしいですが、以下が簡単と感じました。
参考：プロジェクト作成時に設定する方法、プロジェクト作成後に反映する方法(今回)

以下のようにstyleへScssの指定を追加して下さい。

<style lang="scss"> //この部分に追記
</style>

これだけだと次のようなエラーが出ますので、
Failed to resolve loader: sass-loader You may need to install it.
ターミナルで以下を実行します。

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

あとはいつものようにScssを記述していけば、自動でコンパイルしてくれます。

<style lang="scss">
  .nav {
    ul {
      li {
          list-style-type: none;
      }
    }
  }
</style>

簡単ですね！