Vue 中使用的 CSS 变量

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>

原文由 Ben Casalino 发布，翻译遵循 CC BY-SA 4.0 许可协议

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 ，就无法在子组件中使用声明的变量。

原文由 aBiscuit 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

迟到的答案 - 这是一个从标准 vue 结构派生的 css vars 的工作示例。

 <template>
  <div>
  <component :is="'style'">
    :root {
    --color: {{ color }};
    --text-decoration: {{ textDecoration }};
    --font-size: {{ fontSize }};
    }
  </component>
    <p>example</p>
  </div>
</template>

<script>

export default {

  props:{
    color: {
      type: String,
      default: '#990000'
    }
  },

  data: function () {
    return {
      textDecoration: 'underline'
    }
  },

  computed: {
    fontSize: function (){
      return Math.round(Math.random() * (5 - 1) + 1) + 'em';
    }
  }
}
</script>

<style>
p{
  color: var(--color);
  text-decoration: var(--text-decoration);
  font-size: var(--font-size);
}
</style>

从顶部开始…

• Vue 必须有 1 个根元素，所以我需要一个 div 标签来包含一个示例 p 标签。但是，您可以只使用 component-is-style 标签并去掉 div 和 p 标签。注意需要额外的引号“’style’”。
• 正常的 vue 样式标签可以根据需要设置或不设置范围。

原文由 Tarek Adam 发布，翻译遵循 CC BY-SA 4.0 许可协议