[2150] You can not use CSS variables loaded from a style sheet can not be used in components.

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);
    }
. . .