【Vue】vue-burger-menuにてCSSを適用させたいです。

#vue-burger-menuにてCSSを適用させたいです。

vue-burger-menuを使ってハンバーガーメニューを
実装しているのですが、CSSが適用されません。。

公式のstyle欄には

Styling
Visual styles (color, font etc) need to be supplied with the help of CSS

スタイル（色、フォントなど）はCSSの助けを借りて提供する必要がありますと書かれていますが、
以下のように用意されているCSSに上書きしたくソースを書き換えていますが、適用されません。。

<div class="chat">
    <h1 class="chat-tll flex">
      <div class="flash neon">Chat Room</div>
        <slide right style="left: auto; right: 36px; top:20px;">
          <router-link to="/" class="header-link neon3 flash">HOME</router-link>
          <router-link to="/about" class="header-link neon3 flash"
            >ABOUT</router-link
          >
          <router-link
            :to="`/board/${this.uid}`"
            class="header-link neon3 flash"
            >POST</router-link
          >
          <router-link
            to="/signup"
            class="header-link neon3 flash"
            v-if="!authenticatedUser"
            >SINGUP</router-link
          >
          <router-link
            to="/signin"
            class="header-link neon3 flash"
            v-if="!authenticatedUser"
            >SINGIN</router-link
          >
          <router-link
            :to="`/mypage/${this.uid}`"
            class="header-link neon3 flash"
            >MYPAGE</router-link
          >
          <li v-if="authenticatedUser">
            <button
              class="header-link neon3 flash"
              @click="signOut"
              v-if="authenticatedUser"
            >
              SINGOUT
            </button>
          </li>
        </slide>
      <div id="page-wrap"></div>
    </h1>

~ 省略 ~


<style scoped lang="scss">
//ハンバーガーメニュー
.bm-burger-button {
  cursor: pointer;
  height: 30px;
  left: 36px;
  position: absolute;
  top: 20px;
  width: 36px;
  color: $white-color;
}

.bm-menu {
  background-color: $black-color !important;
  height: 100%;
  left: 0;
  overflow-x: hidden;
  padding-top: 60px;
  position: fixed;
  top: 0;
  transition: 0.5s;
  width: 0;
  z-index: 1000;
}
</style>