通过Vue-cli 3的模块化CSS（无范围）

Question

我有一个大问题... 我正在工作的网站 https://healthyitservices.org

导航页面上的那些箭头。 我试图让有人进入另一个页面时通过css转换将它们移动到页面周围的不同位置（使用vue-router） 示例：https://codepen.io/DrLeeroyPhD/pen/gjYNmb

我一直在想的想法是：

1. 有没有简单的方法可以使View中的CSS模块化？ （我有 试图看一下模块化的CSS函数，但是 不可能将它实施到这个项目中 由vue-cli 3生成）

2. 也许是一种更改箭头ID的方法，以便它们遵循 页面特有的样式？

3. 我注意到，使用vue-router，无论选择哪个页面， 链接被分配了".router-link-exact-active"类，也许我 可以做些什么？

要注意的一件事是，我希望保持其模块化，箭头位于app.vue中，并且我希望箭头的样式位于每个视图中，例如：

主页

.arrow {
    top: 0;
  }

  .arrow2 {
    right: 0;
  } 

关于页面

.arrow{
    top: 30% !important;
  }

  .arrow1{
    left: 5% !important;
  }

  .arrow2{
    left: 40% !important;
  }

您可以在以下位置查看我的代码 https://github.com/DrLeeroyPhD/healthy-it-services

感觉应该有一个相当简单的解决方案，而我为此花了太长时间了...

谢谢！