代码更改后，Vue JS CSS 未在浏览器上更新

Question

我的 VUS JS 浏览器遇到了一个奇怪的错误。突然，一些 CSS 更改停止在浏览器上更新。 我的主页上嵌套了一个简单的页脚 Chid 组件。该组件已在页面上呈现，但 CSS 属性不在浏览器中。

在此处输入图片说明

一些代码：主页

 <div class="home">
      <header>
        <div class="layout">
          <div class="logo"></div>
          <div class="search">
            <router-view name="NavBarSearch"></router-view>
            <router-view name="NavBar"></router-view>
    
          </div>
          <div class="nav">
            <button type="button" id="create" class="btn  rounded-pill">Create Diet</button>
          </div>
        </div>
      </header>
      <nav id="top">
        <div class="layout">
          <div class="space"></div>
          <div class="main">
          </div>
          <div class="tabs">
            <router-view name="Tabs"></router-view>
          </div>
        </div>
      </nav>
      <nav id="left">
        <div class="container">
          <router-view name="LeftbarNav"></router-view>
        </div>
      </nav>
      <section>
        <div id="main">
        </div>
        <Footer></Footer>
      </section>
      <aside id="right">
        <div class="layout">
          <section class="main">
          </section>
          <footer class="settings">
          </footer>
        </div>
      </aside>
    
      <div class="overlay" :class={active:FullOverlay} v-on:click="mealDetails"></div>
    </div>

CHID 组件“页脚”

<template>
  <div class="footer">
    <div class="left">
    
    </div>
    <div class="right">
      
    </div>
  </div>
</template>

<script>
import { Calendar, Stepper } from "./";
export default {
  name: "Footer",
  components: {
    Calendar,
    Stepper ,
  },
  data() {
    return {};
  },
};
</script>

<style lang="scss" scoped>
.footer {
  position: sticky;
  bottom: 0;
  height: 110px;
  width: 100%;
  display: grid;
  background-color: rgb(255, 255, 255);
  grid-template-columns: repeat(12, 1fr);
  .left {
    grid-area: left;
    grid-column: span 2;
    grid-row: span 2;
    background-color: transparent;
    // background-color: green;
  }
  .right {
    grid-area: right;
    grid-column: span 10;
    grid-row: span 2;
    background-color: transparent;

    // background-color: yellow;
  }
}
</style>