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

Question

4

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

我尝试使用包含以下内容的.env文件：

VITE_COLOR="FF0000"

并且在 tailwind.config.js 中进行导入

...
theme: {
    colors: {
       primary: import.meta.env.COLOR
    }
}
...

然而，我遇到了以下错误：

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

我需要做出哪些改变才能使其工作，或者是否有更好的方法？

- Max

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Ihar Aliakseyenka · Accepted Answer

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

您可以安装名为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文件中定义变量或在<head>标签内创建style标记在index.html中。

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

在配置文件中。

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

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