VueJS/Tailwind CSS/VITE : utiliser les variables d'environnement comme couleur du thème Tailwind

Question

J'ai une configuration VueJS avec Vite, Tailwind CSS et postcss et j'aimerais définir différentes couleurs à l'aide de variables dans le fichier .env.name le code est déployé Différents thèmes de couleurs. ≪ /p>

J'ai essayé d'utiliser un fichier contenant .env

VITE_COLOR="FF0000"

Et importer

dans tailwind.config.js

<code>...
thème: {
    couleurs: {
       primaire : import.meta.env.COLOR
    }
}
...
</code>

Cependant, j'obtiens l'erreur suivante :

Erreur de syntaxe : 'import.meta' ne peut pas être utilisé en dehors d'un module

Que dois-je changer pour que cela fonctionne, ou existe-t-il une meilleure solution ?

Answer 1

Les configurations Tailwind sont des fichiers CommonJS (pas des modules), vous ne pouvez donc pas utiliser les fonctionnalités ES6 comme import

Vous pouvez installer un package appelé dotenv

npm i dotenv

Doit être placé au-dessus du fichier de configuration tailwind, par exemple

require('dotenv').config()

module.exports = {/** */}

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

préfixe

ANY_COLOR='#ffc8dd'

Vous pouvez désormais y accéder en configuration vent arrière

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

Cela fonctionnera mais si vous modifiez .env les couleurs dans le fichier, vous devrez reconstruire à nouveau le style. Si cela fonctionne pour vous (un déploiement – ​​une couleur de toute façon) – parfait. Je suggérerais personnellement une autre solution basée sur des variables CSS - CanIUse link

Définir des variables dans des fichiers CSS ou dans des index.html中的标签内创建styletags

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

et en configuration

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

C'est tout - pas de packages supplémentaires, de travail supplémentaire, si vous modifiez une variable CSS, les modifications seront appliquées instantanément - même en production car nous utilisons la fonctionnalité CSS