VueJS/Tailwind CSS/VITE: Tailwind テーマの色として環境変数を使用する

Question

Vite、Tailwind CSS、postcss を使用して VueJS セットアップを行っており、.env.name ファイル内の変数を使用してさまざまな色を定義して、どこにあるかに基づいて適用できるようにしたいと考えています。コードがデプロイされます。 さまざまなカラーテーマが展開されます。 < /p>

.env

を含むファイルを使用してみました。

VITE_COLOR="FF0000"

そして tailwind.config.js に

をインポートします。

<code>...
テーマ： {
    色: {
       プライマリ: import.meta.env.COLOR
    }
}
...
</code>

しかし、次のエラーが発生します:

<ブロック引用>

構文エラー: 'import.meta' はモジュール外では使用できません

機能させるには何を変更する必要がありますか、それとももっと良い方法はありますか?

Answer 1

Tailwind 構成は CommonJS ファイル (モジュールではない) であるため、import

のような ES6 機能は使用できません。

dotenv

という名前のパッケージをインストールできます。 リーリー

tailwind 構成ファイルの上に配置する必要があります。たとえば、

リーリー

.env にカラー変数を作成します。 Vite の範囲外である必要があるため、VITE_

という接頭辞が付けられない場合があることに注意してください。 リーリー

追い風構成でアクセスできるようになりました

リーリー

これは機能します ただし、 .env ファイルの色を変更した場合は、スタイルを再度再構築する必要があります。それがうまくいくなら（とにかく 1 つの展開 - 1 色）、素晴らしいです。個人的には、CSS 変数に基づいた別の解決策をお勧めします - CanIUse link

CSS ファイルで変数を定義するか、index.html の タグ内に styletags

を作成します。 リーリー

そして構成内で

リーリー

以上です - 追加のパッケージや余分な作業は必要ありません。CSS 変数を変更すると、変更は即座に適用されます - CSS 機能を使用しているため、本番環境であっても変更が適用されます