Question

是否可以在Vue中使用纯CSS变量而不必链接任何样式表或使用SASS / PostCSS？不确定为什么我无法使它以最基本的形式工作。

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

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

Answer 1

由于样式表的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，就不可能在子组件中使用声明的变量。

Answer 2

我知道您已突出显示“无需链接任何样式表”，但是我遇到了同样的问题，并且有一个简单的选项-仅使用一个外部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>

Answer 3

一种解决方法是在无作用域的style元素下定义它们，如下所示。但是，这里要注意的一件事是，这些变量也将公开给其他Vue组件。

<style>
  :root {
     --var-txt-color: #c1d32f;
  }
</style>

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

Answer 4

为什么不只使用这个？

<style scoped>
  * {
    --var-txt-color: #c1d32f;
  }
</style>

生成的CSS为：

*[data-v-d235d782] {
  --var-txt-color: #c1d32f;
}

这一直在为我工作。

我只是发现使用“ deep selector”

>>>  {
  --var-txt-color: #c1d32f;
}

生成的CSS是：

[data-v-d235d782] {
  --var-txt-color: #c1d32f;
}

我想我更喜欢这种方法。

Vue中使用的CSS变量

4 个答案: