web-dev-qa-db-fra.com

Les variables CSS utilisent dans Vue

Est-il possible d'utiliser des variables CSS pures avec Vue sans avoir à lier de feuilles de style ou à utiliser SASS/PostCSS? Je ne sais pas pourquoi je ne peux pas faire fonctionner cela dans sa forme la plus élémentaire.

<template>
   <div id="test">
        TEST
    </div>
</template> 
<style scoped> 
   :root {
   --var-txt-color: #c1d32f;
   }

 #test {
 color: var(--var-txt-color);
  }
</style>
cssvue.jsglobal-variablescss-variables
8
Ben Casalino

Cela ne fonctionnera pas comme prévu en raison de l'attribut scoped pour la feuille de style. L'exemple ci-dessus se compile en:

[data-v-4cc5a608]:root {
  --var-txt-color: #f00;
}

Et, comme vous le comprenez, il ne ciblera pas l'élément réel :root.

Il peut être résolu par:

  • Ne pas utiliser l'attribut scoped pour cette feuille de style. Notez que cela peut provoquer des conflits de styles avec d'autres déclarations de variables pour l'élément :root.

  • Utilisation de l'élément d'habillage du composant actuel en tant que root. Si nous déclarons les variables de cette façon:

    .test {
  --var-txt-color: #c1d32f;
  color: var(--var-txt-color);
}

.test-child-node {
  background-color: var(--var-txt-color);
}

Ensuite, il pourra réutiliser des variables pour d'autres éléments du même composant. Mais quand même, il ne sera pas possible d'utiliser des variables déclarées à l'intérieur des composants enfants sans supprimer scoped, si c'est le cas.

5
aBiscuit

Je sais que vous avez mis en évidence "sans avoir à lier de feuille de style", mais je rencontre le même problème et il existe une option simple - utilisez un seul fichier css externe et incluez-le dans votre App.vue, puis vous pouvez accéder aux variables n'importe où ailleurs , dans les styles étendus également.

variables.css

:root {
  --font-family: "Roboto", "Helvetica", "Arial", sans-serif;
  --primary-color: #333a4b;
}

App.vue

<style>
  @import './assets/styles/variables.css';
</style>

LandingView.vue

<style scoped>
  #landing-view {
    font-family: var(--font-family);
    font-weight: 300;
    line-height: 1.5em;
    color: var(--primary-color);
  }
</style>
3
ThePianist