How can styles be used globally in a module?

Question

Vue.js

How can classes from global styles be used in a module?

<template>
  <a href="/" :class="$style.appLogo"> <AppLogo /> </a>
   <span :class="$style.btnText">Войти</span>
</template>

<script lang="ts">
import { defineComponent } from '@nuxtjs/composition-api'
import AppLogo from '@/static/icons/app/logo.svg?inline'
export default defineComponent({
  components: {
    AppLogo,
  },
})
</script>

<style module lang="scss">
.app {
  &Logo {
    color: $fontColor;
    font-weight: 900;
    font-size: 26px;
    line-height: 44px;
    display: flex;
    align-items: center;
    svg {
      width: 40px;
      height: 47px;
      margin-right: 9px;
    }
  }
}
</style>

and in nuxt.config.js there is a global css

// Global CSS: https://go.nuxtjs.dev/config-css
  css: [
    '@/assets/styles/desktop/button.scss',
  ],

How can I use styles from css files in a component?

Or can it be done somehow differently so that all classes are hashed during assembly?

Answer 1

https://github.com/css-modules/css-modules#exceptions

Answer 2

Alternatively, you can import the desired file with styles

<template>
  <a href="/" :class="$style.appLogo"> <AppLogo /> </a>
   <span :class="$global.btnText">Войти</span>
</template>

<style module lang="scss">
.app {
  &Logo {
    color: $fontColor;
  }
}
</style>

<style lang="scss" module="$global" src="@/assets/styles/desktop/button.scss" />

the classes of the button.scss file will be available in the $global object (you can put your own name)