Vue.js: The CSS doesn't work as expected with “module” option in “style” section

[tesicg]

Here's how the part of navigation bar should look like:

The code looks as following:

<template lang="pug">
  div
    b-nav-item.justify-content-center.d-none.d-md-block(
      :class="$style.wrapper"
      :link-classes="[$style.basket, 'w-100']"
      @click="modalShow = !modalShow"
    )
      i.gicon-cart
      | Корзина {{ totalPrice }}&nbsp;
      i.gicon-currency-ruble
    b-modal(
      v-model='modalShow'
      :title="`${totalProducts > 0 ? `Ваша корзина (${totalProducts})` : 'Ваша корзина'}`"
      hide-footer
      size="lg"
      centered
    ).d-block.text-center
      basket
</template>

<script lang="ts">
import Vue from 'vue'
import { BasketNavData } from 'types/header/nav/basketnav'
import Basket from '../../../components/Basket.vue'
import { mapState } from 'vuex'

export default Vue.extend({
  components: {
    Basket,
  },
  data: (): BasketNavData => ({
    modalShow: false
  }),
  computed: {
    ...mapState(['products']),
    totalPrice() {
      let totalPrice = 0
      for (let product of this.products) {
        let productTotalPrice = product.price * product.quantity
        totalPrice = totalPrice + productTotalPrice
      }
      return totalPrice
    },
    totalProducts() {
      let totalProducts = 0
      for (let product of this.products) {
        totalProducts = totalProducts + product.quantity
      }
      return totalProducts
    },
  },
})
</script>

<style lang="sass" module>
@import "~assets/css/variables.sass"

.wrapper
  display: flex
  justify-items: center
  margin-left: 9px
  margin-right: 9px
  .basket
    color: $white !important
    display: flex
    font-size: 14px
    height: 100%
    justify-content: end
    text-decoration: none
    text-shadow: 0.5px 0.866px 0 black
    &:hover
      background: $nav-bg-hover-color
.modal-header
  background: white
.modal-title
  font-size: 30px
  font-weight: bold
</style>

But, I get the following:

With the code without module "option" in "style" section (I don't need module "option"):

<template lang="pug">
  div
    b-nav-item.justify-content-center.d-none.d-md-block(
      class="wrapper"
      link-classes="[basket, 'w-100']"
      @click="modalShow = !modalShow"
    )
      i.gicon-cart
      | Корзина {{ totalPrice }}&nbsp;
      i.gicon-currency-ruble
    b-modal(
      v-model='modalShow'
      :title="`${totalProducts > 0 ? `Ваша корзина (${totalProducts})` : 'Ваша корзина'}`"
      hide-footer
      size="lg"
      centered
    ).d-block.text-center
      basket
</template>

<script lang="ts">
import Vue from 'vue'
import { BasketNavData } from 'types/header/nav/basketnav'
import Basket from '../../../components/Basket.vue'
import { mapState } from 'vuex'

export default Vue.extend({
  components: {
    Basket,
  },
  data: (): BasketNavData => ({
    modalShow: false
  }),
  computed: {
    ...mapState(['products']),
    totalPrice() {
      let totalPrice = 0
      for (let product of this.products) {
        let productTotalPrice = product.price * product.quantity
        totalPrice = totalPrice + productTotalPrice
      }
      return totalPrice
    },
    totalProducts() {
      let totalProducts = 0
      for (let product of this.products) {
        totalProducts = totalProducts + product.quantity
      }
      return totalProducts
    },
  },
})
</script>

<style lang="sass">
@import "~assets/css/variables.sass"

.wrapper
  display: flex
  justify-items: center
  margin-left: 9px
  margin-right: 9px
  .basket
    color: $white !important
    display: flex
    font-size: 14px
    height: 100%
    justify-content: end
    text-decoration: none
    text-shadow: 0.5px 0.866px 0 black
    &:hover
      background: $nav-bg-hover-color
.modal-header
  background: white
.modal-title
  font-size: 30px
  font-weight: bold
</style>

There's a difference in these 2 lines as well:

:class="$style.wrapper"
:link-classes="[$style.basket, 'w-100']"

class="wrapper"
link-classes="[basket, 'w-100']"

How to fix this issue?