chot Inc.

ちょっと株式会社 社員ブログ
Blog
  • ホーム
  • ブログ
  • Sassの変数を環境変数で切り替える

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

ナレッジ・ノウハウ
Sassの変数を環境変数で切り替える

SHARE

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

ソースコードをコンパイルするときに、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の設定なので、他の環境でも実現可能です!是非自分の環境でもお試しください!

たっちー

フロントエンドエンジニア

1995年生まれ。2018年にweb業界に足を突っ込んだ同人イラストレーター。 現在ではフロントエンド領域を生業としながら幅広くwebをカバーしてます。 コーヒーとジャパンサブカルと技術のお話が大好きです。 ちょっと社では「たっちー」の愛称で呼ばれ、SNSでは「hanetsuki」と言う名前で活動しています。

関連記事

Copyright © 2022, chot inc.