How to use css variables in nuxt?

Question

Vue.js

Good afternoon!!
Tell me how you can include variables in nuxt.js css and use them in any component without importing them into each component

<style lang="scss">
  @import "@/theme/variables";

  .header {
    &__wrapper {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin: 0 auto;
      padding: 0;
      max-width: 1200px;

      @media screen and (min-width: $break_lg) {
        padding: 0 16px;
      }
    }

    
  }
</style>

Answer 1

https://www.npmjs.com/package/@nuxtjs/style-resources

Answer 2

For @import'it in index.scss?