为什么 scss/编译 css 未在浏览器中的某些子元素上呈现

Question

我正在使用 Visual Studio Code 编辑器并在 bash 终端中运行“npm run sass”。

当我对 scss 文件进行更改时，终端显示：

=> 更改：C:\Users\kenne\modern_portfolio\scss\main.scss 渲染完成，正在保存 .css 文件... 将 CSS 写入 C:\Users\kenne\modern_portfolio\dist\css\main.css

在我的 main.css 文件中，每次我进行更改时都会添加编译后的 css。

当我在 Chrome、FireFox、Edge 中提供页面时，不会为某些子元素呈现更改。 (.tech, .item-lang)

当我检查它显示样式是计算出来的。

未显示样式更改的元素嵌套在具有类属性“tech-main”的 div 中。 我已经尝试将 class 属性和 id 属性与嵌套元素一起使用，这在浏览器中没有区别。

我已经用类单独和嵌套编码。见代码 sn-ps。

我已经用 ctrl F5 清除缓存了。

我尝试编写包含文件 _tech.scss 并在主 scss 中使用 @import "tech"。

我已经关闭了所有文件和终端，并多次重启了VScode。

我删除了父 div 及其内容，然后逐行重新编码，认为我的 html 文件以某种方式损坏。 那没有帮助。我删除了父 div 并保留了子元素，没有变化。

我什至尝试重新命名子元素。即 class="tech" 到 class="stuff"。没用。

我不知道还有什么办法可以解决或解决这个问题。

以下是我尝试过的三个编码块。

///////////////////////////////////////////

// Tech Page
.tech-main {
  display: grid;
  grid-gap: 30px;
  grid-template-areas: "tech editor";
  grid-template-columns: repeat(2, 1fr);
  border: 2px solid $secondary-color;
  border-radius: 10px;
  padding: 15px;

  .tech {
    border: 2px $secondary-color;
    border-radius: 10px;
  }

  .item-lang {
    text-decoration: none;
  }
}

//////////////////////////////////////////

// Tech Page
.tech-main {
  display: grid;
  grid-gap: 30px;
  grid-template-areas: "tech editor";
  grid-template-columns: repeat(2, 1fr);
  border: 2px solid $secondary-color;
  border-radius: 10px;
  padding: 15px;

  &.tech {
    border: 2px $secondary-color;
    border-radius: 10px;
  }

  &.item-lang {
    text-decoration: none;
  }
}


//////////////////////////////////////////
// Tech Page
.tech-main {
  display: grid;
  grid-gap: 30px;
  grid-template-areas: "tech editor";
  grid-template-columns: repeat(2, 1fr);
  border: 2px solid $secondary-color;
  border-radius: 10px;
  padding: 15px;
}

.tech {
    border: 2px $secondary-color;
    border-radius: 10px;
}

.item-lang {
    text-decoration: none;
}

html block:
<div class="tech-main">
  <div class="tech">
    <h2 class="sm-heading">Languages & Frameworks I am familiar with.</h2>
    <ul>
      <li class="item-lang">
        <img src="img/html5_RZ.png" alt="html5 icon" />
      </li>
    </ul>
  </div>
  <div class="editor">
    <h2 class="sm-heading">Editors I have used.</h2>
    <li class="item-editor">
      <img src="img/Atom.png" width="128" height="128" alt="Atom icon" />
    </li>
  </div>
</div>

Answer 1

已解决： 我重命名了 html 元素。请参阅 html 代码。 更改了 scss 代码。参见 scss 代码。

现在所有 css 更改都按预期应用。

html代码：

<div class="tech">
      <div class="tech-lang">
        <h2 class="sm-heading">Languages & Frameworks I am familiar with.</h2>
        <ul>
          <li class="item-lang">
            <img src="img/html5_RZ.png" alt="html5 icon" />
          </li>
          <li class="item-lang">
            <img src="img/css3_RZ.png" alt="Notepad++ icon" />
          </li>
          <li class="item-lang">
            <img src="img/js_RZ.png" alt="html5 icon" />
          </li>
          <li class="item-lang">
            <img src="img/php.jpg" alt="php icon" />
          </li>
        </ul>
      </div>
      <div class="tech-editor">
        <h2 class="sm-heading">Editors I have used.</h2>
        <li class="item-editor">
          <label>Atom</label>
          <img src="img/Atom.png" width="128" height="128" alt="Atom icon" />
        </li>
        <li class="item-editor">
          <img src="img/1Notepad++.png" width="128" height="128" alt="Notepad++ icon"/>
        </li>
        <li class="item-editor">
          <label>Sublime Text</label>
          <img src="img/sublime-icon.png" width="128" height="128" alt="Sublime Text icon"/>
        </li>
        <li class="item-editor">
          <label>VScode</label>
          <img src="img/VScode.png" width="128" height="128" alt="Sublime Text icon"/>
        </li>
      </div>
    </div>

scss 代码：

// Tech Overlay
.tech {
  border: 2px solid $secondary-color;
  border-radius: 10px;
  padding: 15px;
  visibility: hidden;

  &.show {
    visibility: visible;
  }

  &-lang,
  &-editor {
    display: flex;
    flex-flow: column wrap;
    align-items: center;
    justify-content: center;
    float: left;
    width: 50%;
    height: 100vh;
    overflow: hidden;
  }
  // Languages Side
  &-lang {
    margin: 0;
    padding: 0;
    background: rgba(darken($primary-color, 5), 0.9);
    border: 2px solid $secondary-color;
    border-radius: 10px;
    list-style: none;
    transform: translate3d(0, -100%, 0);
    @include easeOut;

    &.show {
      // Slide in from top
      transform: translate3d(0, 0, 0);
    }
  }

  // Editors Side
  &-editor {
    background: rgba(darken($primary-color, 5), 0.9);
    border: 2px solid $secondary-color;
    border-radius: 10px;
    transform: translate3d(0, 100%, 0);
    @include easeOut;

    &.show {
      // Slide in from bottom
      transform: translate3d(0, 0, 0);
    }
  }

  .item-lang {
    transform: translate3d(600px, 0, 0);
    @include easeOut;

    &.show {
      // Slide in from right
      transform: translate3d(0, 0, 0);
    }
  }
  .item-lang,
  .item-editor {
    list-style: none;
    margin-bottom: 5px;
  }
}
// Delay each item-lang slide by 0.3s
@for $x from 1 through 4 {
  .item-lang:nth-child(#{$x}) {
    transition-delay: $x * 0.3s;
  }
}
// Delay each item-editor slide by 0.3s
@for $x from 1 through 4 {
  .item-editor:nth-child(#{$x}) {
    transition-delay: $x * 0.5s;
  }
}