monorepoでルートの.envを共有する
- .
- packages
- package1
- package2
- apps
- next
- src
- package.json
- .env
上記のような構成の ./apps/next
のNext.jsのローカルサーバーを pnpm dev
で起動した場合に、.env
の環境変数を参照(process.env.XXXX
)したい場合の方法。stackoverflowに答えがあった。
How to use both root and app level env files with turborepo
I have a monorepo with the following script:
"start": "env-cmd -f .env turbo run start --parallel",
If I run yarn start at the root, it runs all my apps using the .env file at ...
stackoverflow.com
![How to use both root and app level env files with turborepo](/_next/image?url=https%3A%2F%2Fpublic-content.hackersheet.com%2Fwebsite-og-images%2F5d72506b-ad69-4bd6-b9e8-f1c6d5152ed3.png&w=640&q=75)
以下はコマンドとpackage.jsonの修正内容メモ。
Terminal
pnpm add -w -D -E dotenv-cli
apps/next/package.json
{
"scripts": {
"dev": "pnpm with-env next dev",
"with-env": "dotenv -e ../../.env --"
},
}
shadcn/uiの初期化時に生成されるglobals.cssの.darkセクションが出力されない場合の対応方法
shadcn/uiのドキュメント通りにダークモードの設定をしていたらうまくダークモードに切り替わらなかったので対応方法を残しておく。
次のコマンドを実行するとshadcn/uiの初期化を行い、いくつかのファイルが自動的に修正される。
Terminal
pnpm dlx shadcn-ui@latest init
このとき globals.css
が次のように修正される。
globals.css
@layer base {
:root {
/* ... */
}
.dark {
/* ... */
}
}
上記の .dark
のセクションが実際のCSS(/_next/static/css/app/layout.css
)に出力されない場合がある。Tailwind CSSでは使われていないclass属性は出力しないという仕様になっているため。
解決策 その1
なので、次のように tailwind.config.ts
の safelist
に 'dark'
を追加すると良い。
tailwind.config.ts
const config = {
safelist: ['dark'],
}
解決策 その2
他には次のように .dark
を :root[class~="dark"]
に置き換えるという方法がある。
globals.css
@layer base {
:root {
/* ... */
}
:root[class~="dark"] {
/* ... */
}
}
解決策 その3
最後に @layer base { ... }
の外側に出すという対応方法もある。
これらの方法は以下の公式のissueにコメントがついていた。
Dark mode not working because of `@layer base`, demo repo provided ? Issue #313 ? shadcn-ui/ui
Hi and congrats for making these beautiful components! I notice that dark mode isn't working on a fresh install: ran npx create-next-app@latest, didn't choose to use the app directory ran npx shadc...
github.com
![Dark mode not working because of `@layer base`, demo repo provided ? Issue #313 ? shadcn-ui/ui](/_next/image?url=https%3A%2F%2Fpublic-content.hackersheet.com%2Fwebsite-og-images%2Fa5d43352-20cb-4c9d-b270-1680705c7c24.png&w=3840&q=75)
.dark section not included in tailwind output ? Issue #515 ? shadcn-ui/ui
This is probably not a shadcn problem but I could really use some help figuring it out. For some reason my dark mode does not work because the css variables .dark in global.css that shadcn uses nev...
github.com
![.dark section not included in tailwind output ? Issue #515 ? shadcn-ui/ui](/_next/image?url=https%3A%2F%2Fpublic-content.hackersheet.com%2Fwebsite-og-images%2F1368b042-7b74-42c9-b7f7-d0a4a2007c93.png&w=3840&q=75)
発生しない状況
Tailwind CSSの設定の content: ['./src/**/*.{ts,tsx}']
の対象となっているファイルで、次のように何かの属性に dark
という単語が含まれていた場合は問題は発生しない(CSSファイルに.darkセクションが出力される)ため気づかなかった。
<ToggleGroupItem className="rounded-full" value="dark" aria-label="Toggle dark">