How to use Google Fonts variable inside component?

[schantanu]

I am trying to use Google Fonts variable inside my components, but I am unable to make it work.

My directory structure

.
├── assets
|   └── styles
|       ├── main.scss
|       └── vars
|           └── _colors.scss

nuxt.config.js

export default {
  /* Global CSS */
  css: [
    '@/assets/styles/main.scss',
  ],
  modules: ['@nuxtjs/style-resources'],
  styleResources: {
    scss: [
      './assets/vars/_colors.scss'
      ]
  }
}

main.scss

@import url('https://fonts.googleapis.com/css?family=IBM+Plex+Serif:600');

$serif_family: 'IBM Plex Serif', serif;

.ymca {
    font-family: $serif_family;
}

_colors.scss

$gray: #333;

test.vue

<template>
  <div class="ymca">
    Test
  </div>
</template>

<style lang="scss">
  .ymca {
    color: $gray;
  }
</style>

Now, I am able to set the font to the Google font to the div if I set it in the main.scss, but not if I set it in test.vue. Not sure if this is by design or if there is a better way to set font in the component locally?

[elirehema]

https://stackoverflow.com/a/59090769/7098524

[rchl]

Not sure what does that $gray variable has to do with anything here. Your question seems to be about setting the font family yet you mentin the _colors.scss and the $grey variable for some reason.

What exactly did you want to achieve?