Nuxtで共通的に利用するSCSSの変数をグローバルでインポートする

Nuxt+SCSSで開発をしていると、変数やmixinなど共通的に使うファイルでも、
コンポーネントごとに@import文を書かないといけない。。

めんどくさいなと思っていたら、グローバルで登録ができるのがあったので、
試してみたときの備忘録。

・nuxt-community/style-resources-module: Nobody likes extra @import statements!

インストール

まずは、インストール。

$ npm i -D @nuxtjs/style-resources

nuxt.config.tsの設定

importしたいのは、変数のファイルだけなので、こんな感じ。

// nuxt.config.ts
import { Configuration } from "@nuxt/types";

const config: Configuration = {
  buildModules: [
    "@nuxtjs/style-resources",
  ],
  
  styleResources: {
    scss: [
      '~/assets/_variables.scss',
    ],
  },
  // 略
};

export default config;

これだけ！簡単！

コンポーネント内で変数を使っても、
ビルド時にstyleResourcesで設定したファイルを考慮してくれるように(´ω｀)

※注意!!※

ドキュメントにも書いてあるけど、
変数・mixins・functionだけをインポートするビルドモジュールで、
実際に使われるCSSはインポートされないので注意。とのこと。

あと、nuxt-sass-resources-loaderもあるけど、
Nuxt.js v2.4.0以上では使ってはいけないっぽいので注意。

以上!!

参考にしたサイトさま

• nuxt-community/style-resources-module: Nobody likes extra @import statements!
• Nuxt.jsで「style-resources-module」を使って、グローバルで変数やmixinなどを使えるようにする | 大阪市天王寺区SOHOホームページ制作 | デザインサプライ-DesignSupply.-
• Nuxt.js v2.4.0以上でnuxt-sass-resources-loaderを使ってはいけない - Qiita