webentwicklung-frage-antwort-db.com.de

CSS-Variablen werden in Vue

Ist es möglich, reine CSS-Variablen mit Vue) zu verwenden, ohne Stylesheets verknüpfen oder SASS/PostCSS verwenden zu müssen? Unsicher, warum ich nicht in der Lage bin, dies in seiner grundlegendsten Form zum Laufen zu bringen.

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

 #test {
 color: var(--var-txt-color);
  }
</style> 
8
Ben Casalino

Dies funktioniert aufgrund des Attributs scoped für das Stylesheet nicht wie erwartet. Beispiel oben kompiliert in:

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

Und wie Sie verstehen, zielt es nicht auf das tatsächliche :root - Element ab.

Es kann gelöst werden durch:

  • Das scoped-Attribut wird für dieses Stylesheet nicht verwendet. Beachten Sie, dass es zu Konflikten zwischen Stilen und anderen Variablendeklarationen für das Element :root Kommen kann.

  • Verwenden des Umbruchelements der aktuellen Komponente als Stamm. Wenn wir Variablen auf diese Weise deklarieren:

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

Dann kann es Variablen für andere Elemente derselben Komponente wiederverwenden. Es ist jedoch nicht möglich, deklarierte Variablen in untergeordneten Komponenten zu verwenden, ohne scoped zu entfernen, wenn dies der Fall ist.

5
aBiscuit

Ich weiß, dass Sie "ohne Verknüpfen eines Stylesheets" markiert haben, aber ich habe dasselbe Problem und es gibt eine einfache Option: Verwenden Sie nur eine externe CSS-Datei und fügen Sie sie in Ihre App.vue ein. Dann können Sie auf die Variablen an einer anderen Stelle zugreifen , auch in Scoped Styles.

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