VueJS/Tailwind CSS/VITE：使用环境变量作为 Tailwind 主题的颜色

Question

我有一个包含 Vite、Tailwind CSS 和 postcss 的 VueJS 设置，并且希望使用文件中的变量定义不同的颜色，.env.name以便我可以根据代码部署的位置应用不同的颜色主题。

我尝试使用.env包含

VITE_COLOR="FF0000"

以及内的进口tailwind.config.js

VITE_COLOR="FF0000"

但是，我收到以下错误：

SyntaxError：无法在模块外部使用“import.meta”

我需要改变什么才能让它发挥作用，或者有更好的方法吗？

Answer 1

Tailwind 配置是 CommonJS 文件（不是模块），因此您不能使用 ES6 功能，例如import

您可以安装名为dotenv的软件包

npm i dotenv

需要它在你的 tailwind 配置文件之上，例如

require('dotenv').config()

module.exports = {/** */}

在中创建颜色变量.env。请注意，由于我们要求它超出了 Vite 的范围，因此它可能不会带有前缀VITE_

ANY_COLOR='#ffc8dd'

现在您可以在 tailwind 配置中访问它

ANY_COLOR='#ffc8dd'

这可行，但是如果您更改.env文件中的颜色，则需要再次重建样式。如果它适合你（一种部署 - 无论如何一种颜色） - 很好。我个人会建议另一种基于 CSS 变量的解决方案 - CanIUse 链接

在CSS文件中定义变量或在标签内创建style标签<head>index.html

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

并在配置中

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

就是这样 - 没有额外的包，额外的工作，如果你更改 CSS 变量，更改将即时应用 - 即使在生产中，因为我们使用 CSS 功能