Sassの変数を環境変数で切り替える

この記事は以前ちょっと株式会社 社員ブログで公開していたものです

こんにちわ、ちょっと株式会社 エンジニアのhanetsukiです。

ソースコードをコンパイルするときに、NODE_ENVという環境変数をよく使いますよね。
'development'とか'production'とかいうやつです。

今回私が携わっていた案件で、このNODE_ENVが切り替わるタイミングでSassの変数いじりたいなというケースがあったので、その忘備録としてこの記事を書きました。

リポジトリ
https://github.com/tsuki-lab/example-environment-sass-variables

今回使う環境
私が今回実施した環境です。

• Next.js v12.1
• css modules（sass）

TL;DR

next.config.js

// eslint-disable-next-line @typescript-eslint/no-var-requires
const path = require('path')

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  sassOptions: {
    includePaths: [path.join(__dirname, 'src/styles')],
    additionalData: `@use "var.${process.env.NODE_ENV}.scss" as environment;`,
  },
}

module.exports = nextConfig

src/styles/var.production.scss

$env: production;

src/styles/var.development.scss

$env: development;

src/styles/global.scss

html {
  --env: #{environment.$env};
}
--env: development; or --env: production;

解説

今回肝となるのは、additionalDataというオプションです。
これは、scssファイルの先頭にオプションとして渡した情報を追加するというものになります。
https://github.com/webpack-contrib/sass-loader#additionaldata

GitHubのサンプルでも同様にNODE_ENV情報を渡していることから、環境変数等で利用するのを目的とされているのかもしれません。

今回は、環境変数を用いて特定のファイルの@useを追記するようにしました。
理由としては、変数は必ずしも1つではないかもしれないということです。

都度オプションに追記しても良いですが、ファイル毎に渡せるようにしておいた方が融通が効きやすかったりするので、今回はそのように対応しました。

また、今回はNext.jsを用いましたが、このオプションはsass-loaderの設定なので、他の環境でも実現可能です！是非自分の環境でもお試しください！