前提

Nuxt.jsの環境構築が済んでいる方。済んでいない方はこちらで環境構築を済ませてください。

インストール&設定手順

Step1. パッケージを追加する

yarn add node-sass sass-loader 

これだけでSass(Scss)が使えるようになったはずです。Nuxt.jsの場合スタイルを記述する場所はassetsディレクトリの中か、.vueファイルの中ぐらいだと思いますが、今回は任意の.vueファイルの<style></style>にスタイルを記述してみたいと思います。

<template>
  ~ 中略 ~
</template>

<script>
  ~ 中略 ~
</script>

<style lang="scss" scoped>
.Hoge {
  width: 100%;
}
</style>

実際に画面を見てみるとスタイルが当たっていることが確認出来たかと思います。

が、これで終わりではありません。

さきほど、スタイルを記述する場所はassetsディレクトリの中か、.vueファイルの中ぐらいだと言いましたが、このままではassetsディレクトリの中の.sass(.scss)ファイルで宣言された変数やmixinを.vueファイルから参照することが出来ません。共通化したくて宣言されたものが.vueファイルでは使えないんじゃ話にならないですよね。
しっかり共通化されたものを使えるようにするためにさらに設定を進めていこうと思います。

Step2. パッケージをさらに追加する

yarn add @nuxtjs/style-resources

Step3. nuxt.config.jsを設定

// nuxt.config.js

module.exports = {
  ~ 中略 ~
  modules: ['@nuxtjs/style-resources'],
  styleResources: {
    scss: [
      '~/assets/css/main.scss',
    ],
  },
  ~ 中略 ~
}

注目したいのが、.scssファイルがそのまま指定可能な点です。ここに設定したmain.scssで他の.scssファイルをimportすればOKです。

// main.scss

@import ‘./setting’;
@import ‘./tools’;
@import ‘./generic’;

これで全ての準備が完了しました。main.scss(もしくはimportしたscss)で宣言した変数が任意のコンポーネント内で使えるようになっているはずです。

さいごに

Scssはもはや必須と言っても過言ではないですよね。使ってない人見たことない。ちなみにSass派はどのぐらいいるんだろう。ということで今回はScssのお話でした。コンポーネントから変数が使えないと話にならないので、@nuxtjs/style-resourcesもぜひ使ってくださいね。では。