Nuxt.jsでSassを使用する

Nuxt.jsでSassを使用する方法をメモ。

設定方法

Nuxt.jsのプロジェクトを準備した後で、必要なパッケージをインストールします。

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

記事作成時点だとsass-loaderのバージョン12.1.0がインストールされるのですが、そのバージョンだと使用時にエラーが出るようだったので、「sass-loader@10」として古いバージョン(10.2.0)をインストールしています。
この部分は適宜変更してください。

これで準備ができたので、CSS記述時にlang=”scss”を追記すればSassが使用できます。

<style lang="scss">
.sample {
  &__aaa {
    background: red;
  }
}
</style>