Nuxtさん、グローバルCSSが使えないっぽい(泣)

NuxtでグローバルCSSを使う方法を調べていたら、いまいち確立してない感じだったので、公式のほうを色々見ていたらなんかあったのでそれの紹介です（疲れで語彙力がパージされています）。

環境

• Windows 10 Pro
• WSL Ubuntu
• yarn -v -> 1.17.3
• node -v -> v12.10.0
• npm list nuxt -> nuxt@2.9.2
• npm list vue -> vue@2.6.10

前提パッケージのインストール

Sass(SCSS)、LESS、Stylusなどをお使いの方は、前提パッケージをインストールする必要があります。
もうすでに使っていて、パッケージがインストールされている状態なら、再度インストールする必要はありません。

また、CSSの方は以下のパッケージをインストールする必要はありませんので、このステップを飛ばして次に進んでください。

• Sass: yarn add sass-loader node-sass
• LESS: yarn add less-loader less
• Stylus: yarn add stylus-loader stylus

これらの自分が使っている言語に対応したパッケージをインストールしてください。
npmの方はnpm install --save うんたらかんたらです。

@nuxtjs/style-resourcesをインストール

まず、yarn add @nuxtjs/style-resourcesを実行してモジュールをインストールしてから、nuxt.config.jsもしくは.tsにそのうまを書きます。今回は、SCSSのみを実例として紹介します。

JSの場合:

nuxt.config.js

export default {
  modules: [
    '@nuxtjs/style-resources',
  ],

  styleResources: {
   scss: [
       './assets/style/*.scss',
     ],
  }
}

TSの場合:

nuxt.config.ts

import { Configuration } from '@nuxt/types'

const config: Configuration = {
  modules: [
    '@nuxtjs/style-resources',
  ],

  styleResources: {
   scss: [
       './assets/style/*.scss',
     ],
  }
}

export default config

TSの設定は人によってかなり違ったりするかもしれませんので、いま現在動くコンフィグをお持ちであれば、modules:へのモジュールの追加と、styleResources:の追加だけで構いません。

補足

Sassを使う場合と、SCSSを使う場合では書き方が少し違います。詳しくは、こちらのリファレンスを参考にしてください。
https://github.com/nuxt-community/style-resources-module#setup

使ってみる

先程のconfigに従うと、適当に~/assets/style/_variables.scssを作って、中に

_variables.scss

$hoge: #333;
$huga: #777;

こんな感じで書いて、

index.vue

<template>
  <div class="yeet">
    <p>あーだこーだ ...</p>
  </div>
</template>

<style lang="scss">
.yeet {
  color: $hoge;
}
</style>

みたいな感じで動くかなと思います。