Nuxt.jsでScssを使用する方法

NuxtでもScssを使いたいと思いましたが、create-nuxt-appしただけではScssは使えません。
使用するには以下の手順を踏んで下さい。(参考記事)

ひとまずいつも通りappを作成して下さい。

$ npx create-nuxt-app sample-app
$ cd sample-app

そうしたら以下のコードを実行してScssを使用できるように色々とインストールしていきます。

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

スタイルを適用したい部分に、以下のようにscssの指定をすることでscssを使用することができます。

<style lang="scss"> //scssを指定
header {
  nav {
    color: red
  }
}
</style>

もしくは/assets/配下にscssファイルを作成します。
例）/assets/sass/app.scss　とします。
そして、nuxt.config.jsに以下の記述を追加して、作成したScssファイルを読み込ませます。

/*
  ** Global CSS
  */
  css: [
    { src: '~/assets/sass/app.scss', lang: 'scss' }, //作成したscssファイルを読み込ませます。
  ],

nuxt.config.jsに作成したファイルを複数読み込ませてもいいのですが、
大元となるscssファイルを作成し、importにて読み込ませるというのが主流かと思います。
例)asetts/sass配下に以下のファイルを作成した場合、app.scssに他のscssファイルを読み込ませます。
/app.scss
/about.scss
/contact.scss

// app.scssファイル上に以下を記述
@import 'about';
@import 'contact';

Scssはスタイルを付ける上では必須と思いますので、Nuxt.jsでサイト作成中の方の参考にされば幸いです。