VueJS/Tailwind CSS/VITE: Umgebungsvariablen als Farbe des Tailwind-Designs verwenden

Question

Ich habe ein VueJS-Setup mit Vite, Tailwind CSS und Postcss und möchte mithilfe von Variablen in der Datei .env.name verschiedene Farben definieren, damit ich sie basierend auf dem Ort anwenden kann Code wird bereitgestellt. Verschiedene Farbthemen. < /p>

Ich habe versucht, eine Datei zu verwenden, die .env

enthält.

VITE_COLOR="FF0000"

Und import

in tailwind.config.js

<code>...
Thema: {
    Farben: {
       primär: import.meta.env.COLOR
    }
}
...
</code>

Ich erhalte jedoch die folgende Fehlermeldung:

Syntaxfehler: 'import.meta' kann nicht außerhalb eines Moduls verwendet werden

Was muss ich ändern, damit es funktioniert, oder gibt es einen besseren Weg?

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 功能