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