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
VITE_COLOR="FF0000"
Und import
in
tailwind.config.js ... Thema: { Farben: { primär: import.meta.env.COLOR } } ... 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?
Tailwind 配置是 CommonJS 文件（不是模块），因此您无法使用
import等 ES6 功能您可以安装名为dotenv
的软件包需要将其放在 tailwind 配置文件之上，例如
require('dotenv').config() module.exports = {/** */}在
前缀.env中创建颜色变量。请注意，由于我们要求它超出了 Vite 的范围，因此它可能不会带有VITE_现在您可以在 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 功能