VueJS/Tailwind CSS/VITE：使用環境變數作為 Tailwind 主題的顏色

Question

我有一個包含Vite、Tailwind CSS 和postcss 的VueJS 設定，並且想使用.env.name 檔案中的變數定義不同的顏色，以便我可以根據程式碼部署位置應用不同的顏色主題。 < /p>

我嘗試使用包含 .env 檔案

VITE_COLOR="FF0000"

並在 tailwind.config.js 中導入

<code>...
theme: {
    colors: {
       primary: import.meta.env.COLOR
    }
}
…
</code>

但是，我收到以下錯誤：

語法錯誤：無法在模組外部使用“import.meta”

我需要改變什麼才能使其正常工作，或者有更好的方法嗎？

Answer 1

Tailwind 設定是 CommonJS 檔案（不是模組），因此您無法使用 import 等 ES6 功能

您可以安裝名為 dotenv

的軟體包

npm i dotenv

需要將其放在 tailwind 設定檔之上，例如

require('dotenv').config()

module.exports = {/** */}

在.env中建立顏色變數。請注意，由於我們要求它超出了 Vite 的範圍，因此它可能不會帶有 VITE_

# 前綴

ANY_COLOR='#ffc8dd'

現在您可以在 tailwind 配置中存取它

theme: {
    colors: {
       primary: process.env.ANY_COLOR
    }
}

這將起作用但是如果您更改.env檔案中的顏色，則需要再次重建樣式。如果它適合你（一種部署 - 無論如何一種顏色） - 很好。我個人會建議另一個基於 CSS 變數的解決方案 - CanIUse 連結

在CSS檔案中定義變數或在index.html中的#標籤內建立style標籤

:root {
    --theme-color: #ffc8dd;
}

並在配置​​中

theme: {
    colors: {
       primary: 'var(--theme-color)'
    }
}

就是這樣 - 沒有額外的包，額外的工作，如果您更改 CSS 變量，更改將即時應用 - 即使在生產中，因為我們使用 CSS 功能