CSS variables use in Vue, This won't work as expected because of scoped attribute for stylesheet. Example above compiles into: [data-v-4cc5a608]:root { --var-txt-color:  Binding a CSS Variable to style is a clever way to push this pattern a little bit further, while gaining all the benefits of writing variable driven css. Simple Style Binding Example. Let's start with a simple (non-css-variable) example to illustrate. Let's say we have an E-book app.

I know you highlighted "without having to link any stylesheet", but I run into the same issue and there is a simple option - use just one external css file and include it in your App.vue, then you can access the variables anywhere else, in scoped styles as well.

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>

Binding CSS Variables in Vue, Let's tackle the same use case, but using the CSS variable pattern <template> <​div :style="userStyle" class=  Vue 1.0 had the ability to somewhat interpolate variables into the <style> tag, and would allow you to set up CSS variables like so: --bg-color: {{ bgColor }}; However this came with a huge cost, because on every re-render Vue was having to do crazy things like recompiling these styles. Needless to say, it doesn’t work like this today.

Why not just use this?

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

The generated CSS is:

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

This has been working for me.

I just discovered that it looks like this also works, using the "deep selector"

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

Generated CSS is:

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

I think I like this method more.

FR: Reactive CSS variables · Issue #7346 · vuejs/vue · GitHub, Also, the style attribute cannot be used to assign CSS properties to author to use the CSS variable syntax, and require that if you want Vue to  # Working with CSS. Vue CLI projects comes with support for PostCSS, CSS Modules and pre-processors including Sass, Less and Stylus. # Referencing Assets. All compiled CSS are processed by css-loader, which parses url() and resolves them as module requests. This means you can refer to assets using relative paths based on the local file structure.

A New Vue On JavaScript30 - 03 CSS Variables, Should I stay true to #JavaScript30 and use CSS variables or re-implement it taking advantage of Vue's features? Undecided, I took to the  Global Stylus variables. Webpack relies on loaders to process resources. If you use a CSS preprocessor like Sass, Less or Stylus, you will need the corresponding loader for Webpack: sass-loader, less-loader or stylus-loader. For this particular example, we will use Stylus which is the most flexible and easiest to configure in a Vue.js project.

Help: How to use css variables in vue? : vuejs, I've been trying to play around with css variables( not sass), But can't seem to get them work. example of a component : <template> <div class="a-class"> <h1>{{  Let’s use two buttons in the template and an inline expression that will increment and decrement the fontSize variable on the click event: Binding multiple styles to an element <button v-on:click="fontSize++"> Increase font size </button> <button v-on:click="fontSize--"> Decrease font size </button> <p v-bind:style="{ fontSize: fontSize + 'px' }"> Font size is: {{ fontSize }} </p>

Right Way to Use CSS Varialbes in Vue, Inspired by Tailwind.css , CSS variables are not widely supported in all the browsers today. Understanding how to structure and use them in our Vue application can give  When you use a CSS property that requires vendor prefixes in v-bind:style, for example transform, Vue will automatically detect and add appropriate prefixes to the applied styles.

Comments

• what if you use something else than :root? try body or a container element
• I just tried using a body tag but that did not work. Could it be that because its a component and not on the main App.vue causes it to not understand the :root? This is the component in particular I'm trying to get to work on: github.com/bencasalino/nba-timeline-project/blob/master/src/…
• I don't know as I know CSS variable but not experienced with Vue.js ... if you are able to give a link with the working app I can help you by looking at the generated code
• Ended up using SASS, but the fact that its 'scoped' makes sense on why its not working, thank you so much!
• Would you be able to somehow access the css variables in the script tag too? or vice versa?