Nuxt.js: You can not use CSS variables loaded from a style sheet can not be used in components.

Created on 19 Nov 2017 · 7Comments · Source: nuxt/nuxt.js

If you load in a style sheet in your Nuxt config file containing CSS variables, you can not then use those variables inside of your components. Even if styles are not 'scoped', the properties will print as "var(varName)" rather than their value as assigned by the loaded stylesheet.

example:
https://github.com/KyleTryon/vidfire/blob/master/components/vfHeader.vue

This component uses variables defined in a sheet loaded in the config. At this URL you can see that the header is not loading the values listed below.

url: http://localhost:3000/blog/ArticleExample

<style>
    .vfHeader{
        color: var(--color-white);
        background-color: var(--color-main);
    }
. . .

_{This question is available on Nuxt.js community (#c1905)}

help-wanted

Source

KyleTryon

👍8

Most helpful comment

I'm experiencing the same issue. I have a global file (app.sass) with general styles, and it imports some variables (vars.sass). If I want to use those variables in a component (component.vue) I have to import them again. Otherwise, the build task will fail Undefined variable: " $font-small".

// styles/vars.sass
 $font-small: 8px;

```sass
// styles/app.sass
@import './vars.scss';

body {
font-size: $font-small;
}

```javascript
// nuxt.config.js
css: ['./assets/styles/app.scss'],

// component.vue
<style lang="scss">
@import '~styles/vars.scss'; // If this is not imported the variable is not available. 

.div1 {
 font-size: $font-small;
}

I just started using nuxt, and maybe I'm missing something. But I was expecting that the variables would be available globally. They were imported in the app.sass, and that file is injected globally in nuxt.config.js.

jpoo90 on 20 Nov 2017

👍4

All 7 comments

// styles/vars.sass
 $font-small: 8px;

```sass
// styles/app.sass
@import './vars.scss';

body {
font-size: $font-small;
}

```javascript
// nuxt.config.js
css: ['./assets/styles/app.scss'],

// component.vue
<style lang="scss">
@import '~styles/vars.scss'; // If this is not imported the variable is not available. 

.div1 {
 font-size: $font-small;
}

jpoo90 on 20 Nov 2017

👍4

https://github.com/nuxt/nuxt.js/issues/1092

Gomah on 20 Nov 2017

👍2

I'm having this issue with CSS Variables and PostCSS w/ cssnext as well (I'm not using sass for this project). I might be missing something, but I've tried multiple ways of importing the variables including loading in a style sheet in the Nuxt config file and defining the vars in the :root selector in the default layout file.

Anyone had any luck with this?

jamesjlyons on 25 Dec 2017

👍1

I think this is intended behavior, even though it seems a little cumbersome to import the same vars every time. Components should always be explicit about inheriting anything (styles/props, etc). This allows for maximum flexibility inside the component (in the case of styles, if you wanted to use a different vars file, or even a different pre-processor).

I like to use a _settings.scss file that includes all vars, mixins, and any other tools that won't output css. That keeps things somewhat simple.