CSS 行为与 Nuxt 3 不一致

Question

我的 CSS 遇到了一个非常奇怪的行为。

当我最初加载页面时（或当我刷新时），没有应用 CSS。但是，我注意到，如果我对样式标签进行更改，例如添加（或删除）范围，CSS 将应用于页面。

我正在使用 Nuxt 3.8.1 并使用 sass 进行样式设计。

我上网查了一下，但找不到有这个问题的人。

这是我的代码示例：

<style lang="scss">

@font-face {
  font-family: 'Basil Regular';
  src: url('~/public/Basil-Regular.ttf') format('truetype'),
       url('~/public/Basil-Regular.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

  .indexMain{
    margin-top: 0%;
    height:80vh;
    background-image: url('/house3.png');
    background-size: cover;
    background-position: center;

    .headings{
      margin-left: 5%;
      font-size: 2.5rem;
        h1 {
        font-family: 'Basil Regular';
        margin-top: 0%;
        margin-bottom: 0%;
        color: white;
        }
        h3 {
        font-family: 'Basil Regular';
        margin-top: -1%;
        margin-bottom: 0%;
        color: white;
        }
        .first-h1{
            padding-top: 7%;
        }
        .second-h1{
            padding-top: 2.5%;
        }
    }
  }
</style>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<template>
  <div className="indexMain">
    <div className="headings">
        <h1 className="first-h1">Майсторство</h1>
        <h3>без компромиси</h3>
        <h1 className="second-h1">Усилия </h1>
        <h3>без граници</h3>
    </div>
  </div>
</template>

Answer 1

不要使用

className

属性，使用常规

class

-

<div class="indexMain">

等