web-dev-qa-db-ja.com

CSS変数は、Vue

スタイルシートをリンクしたり、SASS/PostCSSを使用したりせずに、Vueで純粋なCSS変数を使用することは可能ですか？これを最も基本的な形式で動作させることができない理由は不明です。

<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

スタイルシートのscoped属性のため、これは期待どおりに機能しません。上記の例は次のようにコンパイルされます。

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

そして、あなたが理解しているように、それは実際の:root要素を対象としません。

次の方法で解決できます。

  • このスタイルシートにscoped属性を使用していません。 :root要素の他の変数宣言とスタイルが競合する可能性があることに注意してください。

  • 現在のコンポーネントのラッピング要素をルートとして使用します。この方法で変数を宣言する場合：

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

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

その後、同じコンポーネントの他の要素の変数を再利用できます。それでも、scopedを削除しないと、子コンポーネント内で宣言された変数を使用することはできません。

5
aBiscuit

「スタイルシートをリンクすることなく」を強調したことは知っていますが、同じ問題に遭遇し、簡単なオプションがあります-外部CSSファイルを1つだけ使用してApp.vueに含めると、どこからでも変数にアクセスできます、スコープ付きスタイルでも。

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