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> 

Answer 1

我知道你强调了“无需链接任何样式表”，但我遇到了同样的问题，有一个简单的选择 - 只使用一个外部 css 文件并将其包含在你的 App.vue 中，然后你就可以访问其他任何地方的变量, 在作用域样式中也是如此。

变量.css

:root {
  --font-family: "Roboto", "Helvetica", "Arial", sans-serif;
  --primary-color: #333a4b;
}

应用程序

<style>
  @import './assets/styles/variables.css';
</style>

登陆视图.vue

<style scoped>
  #landing-view {
    font-family: var(--font-family);
    font-weight: 300;
    line-height: 1.5em;
    color: var(--primary-color);
  }
</style>

Answer 2

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

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

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

Answer 3

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

<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 样式标签可以根据需要限定范围或不限定范围。

Answer 4

由于scoped样式表的属性，该方法无法正常工作。上面的示例编译为：

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

而且，如您所知，它不会针对实际:root元素。

可以通过以下方法解决：

• 不scoped为此样式表使用属性。请注意，这可能会导致样式与:rootelement的其他变量声明冲突。

• 使用当前组件的包装元素作为根。如果我们这样声明变量：

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

然后，它将可以将变量重用于同一组件的其他元素。但是scoped，即使是这种情况，也不能在不删除的情况下在子组件中使用声明的变量。

Answer 5

为什么不直接使用这个？

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

生成的 CSS 是：

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

这对我有用。

我刚刚发现它看起来也有效，使用“深度选择器”

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

生成的 CSS 是：

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

我想我更喜欢这种方法。

Answer 6

好了，现在你可以使用 CSS 变量注入了。

<template>
  <div>
    <div class="text">hello</div>
  </div>
</template>

<script>
  export default {
    data() {
        return {
            color: 'red',
            font: {
                weight: '800'
            }
        }
    }
  }
</script>

<style>
  .text {
    color: v-bind(color);
    font-weight: v-bind('font.weight');
  }
</style>

这些样式也是反应式的和有作用域的。不会有任何意外的继承问题。Vue 为您管理 CSS 变量。

您可以在此处查看 RFC 。