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

スクラップ - Zenn

https://zenn.dev/rabbit/scraps/9449140a9398e5

環境別環境変数ファイルの作成

$env: development;

$env: production;

next.config.jsのsassOptionsにprependDataを記述

  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

他ファイルで変数を利用

html {
  --env: #{environment.$env};
}

--env: development; or --env: production;