Vue中分离CSS与JS文件失效问题求助

我正在学习Vue，尝试将HTML、CSS和JS文件拆分以提升代码规范性，但目前页面出现异常，怀疑问题出在CSS文件中，暂未确定具体原因。预期实现一个欢迎页面，其中两行文字会循环淡入淡出。相关代码如下：

HTML代码 #

<template>
    <header id="mainHeader">
        <div class="logo-container"><img src="../Logo/LogoIND.png" alt="Logo IND" id="logo"></div>
  </header>

  <main>
    <div class="loop-text">
        <p>BIER</p>
        <p>Hoşgeldiniz</p>
        <p>Ласкаво просимо</p>
        <p>ښه راغلاست</p>
        <p>أهلا بك</p>
        <p>Welkom</p>
    </div>

    <div class="loop-text2">
        <p>DRINK to Start</p>
        <p>Başlatmak için dokunun</p>
        <p>Торкніться, щоб почати</p>
        <p>مسکارا پیل دی</p>
        <p>المس للبدء</p>
        <p>Aanraken om te beginnen</p>
        
    </div>
  </main>
</template>

<script src="./Welkom.js"></script>
<style scoped>
  @import './CSS.css';
</style>

CSS代码 #

template {
    background-color: #452170;
    color: #ffff;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    line-height: 1.6em;
    margin: 0;
    height: 1080px;
  }
  
  .logo-container {
    text-align: center;
    width: 100%;
  }
  
  #logo {
    height: 17em;
  }
  
  .containter {
    height: auto;
  }
  
  @keyframes fade {
    0% {
      opacity: 0;
    }
  
    50% {
      opacity: 1;
    }
  
    100% {
      opacity: 0;
    }
  }
  
  .loop-text {
    width: 100%;
    text-align: center;
    position: relative;
    height: 25em;
  }
  
  .loop-text p {
    font-family: 'PT Serif';
    opacity: 0;
    transition: 1.75s ease-out;
    width: inherit;
    position: absolute;
    height: inherit;
    font-size: 16em;
    top: 0.6em;
    margin: 0;
    padding: 0;
  }
  
  .loop-text .show {
    opacity: 1;
  }
  
  .loop-text2 {
    width: 100%;
    text-align: center;
    position: relative;
    height: 25em;
  }
  
  .loop-text2 p {
    font-family: 'PT Serif';
    opacity: 0;
    transition: 1.75s ease-out;
    width: inherit;
    position: absolute;
    height: inherit;
    font-size: 9em;
    top: 0.6em;
    margin: 0;
    padding: 0;
  }
  
  .loop-text2 .Afbeelden {
    opacity: 1;
  }

JavaScript代码 #

let texts = document.querySelectorAll(".loop-text p");

let prev = null;
let animate = (curr, currIndex) => {
  let index = (currIndex + 1) % texts.length
  setTimeout(() => {
    if(prev) {
      prev.className = "";
    } 
    curr.className = "show";
    prev = curr;
    animate(texts[index], index);
  }, 3500);
}

animate(texts[0], 0);

let texts2 = document.querySelectorAll(".loop-text2 p");

let prev2 = null;
let animate2 = (curr, currIndex) => {
  let index = (currIndex + 1) % texts2.length
  setTimeout(() => {
    if(prev2) {
      prev2.className = "";
    } 
    curr.className = "Afbeelden";
    prev2 = curr;
    animate2(texts2[index], index);
  }, 3500);
}

内容的提问来源于stack exchange，提问作者VdeJ