今回は、Nuxt.jsでscssを使用する方法を解説しています。
scssを使用すると、CSSを書く際に便利な機能がたくさん使えます。グローバルで読み込む方法も解説しています。

ライブラリをインストール

sass-loaderとnode-sassをdevDependenciesにインストールします。

yarn add -D sass-loader node-sass

以上で、Nuxt.jsではscssが使えるようになります。

プロジェクトを立ち上げたままインストールするとnode-sassが読み込まれないようなので、Nuxt.jsを再起動してください。

Vueファイルでscssを書く

Vueファイルでscssを使用する場合は、lang="scss"をstyleタグに記載します。

<template>
  <div class="article">
    <h2>テスト</h2>
  </div>
</templatet>
<script>
export default {}
</script>
<style lang="scss">
h1 {
  ...
}
.article {
  ...
}
</style>

scssファイルをグローバルに読み込む

• appilication.scss scssをまとめて読み読ませるファイル
• variables.scss 変数を扱うscssファイル
• common.scss 共通で使うscssを記載するファイル

上記の3つを例にして解説します。

appilication.scss

@import "variables";
@import "common";

variables.scss

$primary: #EE817B;

common.scss

h1 {
  font-size: 30px;
}
.article {
  font-size: 22px;
}

3つファイルがありますが、最終的にappilication.scss1つで吐き出すように設定します。

nuxt.config.jsの設定

グローバルにCSSを読み込ませるには、nuxt.config.jsのcssプロパティにscssファイルを指定します。

export default {
  css: ["@/assets/stylesheets/application.scss"],
}

以上Nuxt.jsでscssを使用する方法でした。
scssの量が増えてくると１ファイルでは管理できなくなってくると思うので、管理しやすいディレクトリ構成を探してみてください！