開発日記-2024-07-27 / monorepoでルートの.envを共有する

monorepoでルートの.envを共有する

上記のような構成の ./apps/next のNext.jsのローカルサーバーを pnpm dev で起動した場合に、.env の環境変数を参照（process.env.XXXX）したい場合の方法。stackoverflowに答えがあった。

以下はコマンドとpackage.jsonの修正内容メモ。

shadcn/uiのドキュメント通りにダークモードの設定をしていたらうまくダークモードに切り替わらなかったので対応方法を残しておく。

次のコマンドを実行するとshadcn/uiの初期化を行い、いくつかのファイルが自動的に修正される。

このとき globals.css が次のように修正される。

上記の .dark のセクションが実際のCSS（/_next/static/css/app/layout.css）に出力されない場合がある。Tailwind CSSでは使われていないclass属性は出力しないという仕様になっているため。

なので、次のように tailwind.config.ts の safelist に 'dark' を追加すると良い。

他には次のように .dark を :root[class~="dark"] に置き換えるという方法がある。

最後に @layer base { ... } の外側に出すという対応方法もある。

これらの方法は以下の公式のissueにコメントがついていた。

Tailwind CSSの設定の content: ['./src/**/*.{ts,tsx}'] の対象となっているファイルで、次のように何かの属性に dark という単語が含まれていた場合は問題は発生しない（CSSファイルに.darkセクションが出力される）ため気づかなかった。