VueJS/Tailwind CSS/VITE:使用环境变量作为 Tailwind 主题的颜色
P粉174151913
P粉174151913 2023-08-26 14:31:22
0
1
389
<p>我有一个包含 Vite、Tailwind CSS 和 postcss 的 VueJS 设置,并且想使用 <code>.env.name</code> 文件中的变量定义不同的颜色,以便我可以根据代码部署位置应用不同的颜色主题。< /p> </p><p>我尝试使用包含 <code>.env</code> 文件</p> <pre class="brush:php;toolbar:false;">VITE_COLOR="FF0000"</pre> <p>并在 <code>tailwind.config.js</code> 中导入</p> <pre class="lang-js prettyprint-override"><code>... theme: { colors: { primary: import.meta.env.COLOR } } ... </code></pre> <p>但是,我收到以下错误:</p> <blockquote> <p>语法错误:无法在模块外部使用“import.meta”</p> </blockquote> <p>我需要改变什么才能使其正常工作,或者有更好的方法吗?</p>
P粉174151913
P粉174151913

全部回复(1)
P粉212114661

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

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!