Как можно использовать глобально стили в module?

Question

[Nubbb]

Как можно использовать классы из глобальных стилей в 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>

и в nuxt.config.js есть глобальный  css

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

как можно в компоненте использовать стили из файлов css ?

Либо можно сделать как-то по-другому, чтобы при сборке все классы хешировались?

Answer 1

[Grigory S.]

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

Answer 2

[Danila]

Как вариант можешь импортировать нужный файл со стилями

<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" />

классы файла button.scss будут доступны в объекте $global (можешь поставить своё название)