使用css module之后,router-link-active无效,该如何调整?

Question

 <div :class="$style.tab">
      <router-link to="/home" :class="$style['tab-item']"> <span class="icon iconfont icon-home"></span><p>首页</p></router-link>
      <router-link to="/discover" :class="$style['tab-item']"> <span class="icon iconfont icon-discover"></span><p>发现</p></router-link>
      <router-link to="/goods" :class="$style['tab-item']"> <span class="icon iconfont icon-kinds"></span><p>分类</p></router-link>
      <router-link to="/mine" :class="$style['tab-item']"> <span class="icon iconfont icon-mine"></span><p>我的</p></router-link>
    </div>
    
    
      // 点击切换路由的时候按钮高亮
  .router-link-active {
    color: red;
  }

通过$style绑定的样式都正确,cssmodules把样式名都转义了,但是router-link-active是路由激活的时候才绑定的,检查元素 样式名是有的,但是未被编译.样式也没有
这种情况该怎么写才能正确绑定呢?

Answer 1

:global {
  .router-link-active {
    color: red;
  }
}