Maison  >  Questions et réponses  >  le corps du texte

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

<p>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 <code>.env.name</code> le code est déployé Différents thèmes de couleurs. ≪ /p> </p><p>J'ai essayé d'utiliser un fichier contenant <code>.env</code></p> <pre class="brush:php;toolbar:false;">VITE_COLOR="FF0000"</pre> <p>Et importer</p> dans <code>tailwind.config.js</code> <pre class="lang-js Prettyprint-override"><code>... thème: { couleurs: { primaire : import.meta.env.COLOR } } ... </code></pre> <p>Cependant, j'obtiens l'erreur suivante : </p> <blockquote> <p>Erreur de syntaxe : 'import.meta' ne peut pas être utilisé en dehors d'un module</p> </blockquote> <p>Que dois-je changer pour que cela fonctionne, ou existe-t-il une meilleure solution ? </p>
P粉174151913P粉174151913441 Il y a quelques jours430

répondre à tous(1)je répondrai

  • P粉212114661

    P粉2121146612023-08-27 00:20:24

    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

    répondre
    0
  • Annulerrépondre