React（TypeScript） WebPackでCSSの環境定数

目次

はじめに

以下の記事を参考に、環境定数を用意してください。

https://reigle.info/entry/2022/08/20/100000reigle.info

環境毎のWebPackを修正する

以下のように、環境情報が取得できる環境定数を定義します。
※「ENV」の部分です。（既存のWebPackがある場合は、ENVのみ追加してください）

const webpack = require("webpack");

module.exports = (env) => {
  return {
    plugins: [
      new webpack.DefinePlugin({
        ENV: JSON.stringify(env),
      }),
    ],
  };
};

環境毎のCSSを作成する

環境定数と同じディレクトリに「[環境定数のファイル名].module.css」のルールに則って、CSSファイルを作成してください。
以下のようなファイル構成になるはずです。

┗ development.js
┗ development.module.css
┗ production.js
┗ production.module.css

「[環境定数のファイル名].module.css」には以下のように定数を定義します。
「:root {」の中が定数なので、任意で追加してください。

:root {
  --sample-background-color: #d21919;
}

定義したCSS定数を読み込む

「src」配下の「index.tsx」を以下のように修正します。（index.tsxの内容は環境によって相違する場合があります。）

重要なのは、「require(../${ENV}.module.css);」の部分です。
ここで、環境毎のCSSファイルを読み込んでいます。

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
require(`../${ENV}.module.css`);

const root = ReactDOM.createRoot(
  document.getElementById("root") as HTMLElement
);
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

CSS定数を使用する方法

「var([定数名])」を使用することで、CSS定数を利用することができます。
以下のように定義が可能です。

.hoge {
  background: var(--sample-background-color);
}