Closed2022/03/13にクローズ2

【Next.js × Sass】`process.env.NODE_ENV`別でSassの変数ファイルを切り替えたい

Next.js

Sass

環境変数

hanetsuki

環境変数の追加

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

src/styles/var.development.scss

$env: development;

src/styles/var.production.scss

$env: production;

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

next.config.js

  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/globals.scss

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

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

hanetsuki

サンプルリポジトリ

このスクラップは2022/03/13にクローズされました