Переменные CSS используют в Vue - PullRequest
Новая
       13

Переменные CSS используют в Vue

0 голосов
/ 10 ноября 2018

Можно ли использовать чистые переменные CSS с Vue без необходимости связывать какие-либо таблицы стилей или использовать SASS / PostCSS? Не уверен, почему я не могу заставить это работать в его самой основной форме. 

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

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

Ответы [ 2 ]

0 голосов
/ 07 марта 2019

Я знаю, что вы выдвинули на первый план «не связывать какую-либо таблицу стилей», но я столкнулся с той же проблемой, и есть простой вариант - использовать только один внешний файл CSS и включить его в ваш 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>
0 голосов
/ 10 ноября 2018

Это не будет работать должным образом из-за атрибута 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, если это так.

...