Nuxt.js 2.x + TypeScript 4.x その0009 Sassの変数やmixinを全てのコンポーネントで使えるようにする

参考にさせていただいたページ

• 《Nuxt.js》Sassの共通の変数やmixinを一括で各コンポーネントに読み込む方法。 - Qiita
• GitHub - nuxt-community/style-resources-module: Nobody likes extra @import statements!

style-resources-module のインストール

「GitHub - nuxt-community/style-resources-module: Nobody likes extra @import statements!」にある通り、Sassは予めインストールして使える状態にしておきます。

以下のコマンドでインストールします。

yarn add -D @nuxtjs/style-resources

nuxt.config.jsの編集

「GitHub - nuxt-community/style-resources-module: Nobody likes extra @import statements!」の最新情報を参照してください。

公式のREADMEの「SCSS Example」の項を参考にnuxt.config.jsを編集します。

export default {
  buildModules: ['@nuxtjs/style-resources'],
  styleResources: {
    scss: [
      './assets/vars/*.scss',
      './assets/abstracts/_mixins.scss' // use underscore "_" & also file extension ".scss"
      ]
  }
}