NuxtJSのSCSS設定を外部から取り込む方法

この記事はGRIPHONE Advent Calendar 2021 5日目の記事です。

こんにちは、フロントエンドエンジニアの小山です。

最近関わったプロジェクトで一つのNuxtJSアプリケーションを、設定ファイルを外部から読み込んで複数の環境で利用したいという案件がありました。
その際にSCSSの変数を環境ごとに変更する方法を勉強したので、今回は詳しく紹介していきたいと思います。

設定ファイルを外部から取り込む

まずは設定ファイルの取り込みを行います。
NuxtJSで.envファイルを扱うには@nuxtjs/dotenvなどのモジュールを使うのが一般的ですが、今回は簡単にjsonファイルをrequireするだけにしました。

nuxt.config.jsのexport〜以前に以下を追記しておきます

// ビルドコマンドの引数をkey, value形式に変換する
const arg = JSON.parse(process.env.npm_config_argv).remain
const buildOption = {}
arg.forEach((val) => {
  val = val.replace('--', '').split('=')
  buildOption[val[0]] = val[1]
})

// campaign_idによって読み込む設定ファイルを変える
const campaign_id = buildOption.campaign_id 
const Env = require(`./env/${campaign_id}/env.json`)

これで準備完了です。
ビルドコマンドにcampaign_idを引数としてつけてあげると、それに応じた設定ファイルを取得できます。
例えば…

npm run build -- --campaign_id=000000

このコマンドで./env/000000/env.jsonを取得します。

設定ファイルの中身

設定ファイルの内容は利用する環境ごとで変えたい内容を記載しておきます。
今回の紹介ではSCSSの設定なので、カラーコードを記載してみます。

{
  "color_main": "#000000",
  "color_point": "#0027ac",
  "color_bonus": "#edab2a"
}

設定ファイルをSCSSの変数として取り込む

さて今回の山場です。設定ファイルに記載した内容をSCSSの変数として取り込みます。
nuxt.config.jsでsass-loaderの設定を追加していきます。

  build: {
    extend(config) {
      config.module.rules.forEach((rule) => {
        rule.oneOf &&
          rule.oneOf.forEach((item) => {
            item.use.forEach((loader) => {
              if (loader.loader === path.join(__dirname, '/node_modules/sass-loader/dist/cjs.js')) {
                // デフォルト色
                let color_main = '#7367F0'
                let color_point = '#7367F0'
                let color_bonus = '#FFC043'

                // 設定ファイルの内容でデフォルト色を上書き
                if (Env.color_main) color_main = Env.color_main
                if (Env.color_point) color_point = Env.color_point
                if (Env.color_bonus) color_bonus = Env.color_bonus

                // scss設定として取り込む。
                Object.assign(loader.options, {
                  additionalData: `$color_main: ${color_main}; $color_point: ${color_point}; $color_bonus: ${color_bonus};`,
                })
              }
            })
          })
      })
    },
  },

最後の取り込みのところでadditionalDataの値として渡す部分はSCSS変数の記法で記述してください。
これで取り込みができるようになりました。

終わりに

いかがでしたでしょうか。若干雑な説明になってしまいましたが、同じレイアウトのNuxtAppのバリエーション替えを作る際にお役に立てればと思います。

それでは皆さん次回もお楽しみに。