Почему scss / соответствует css не отображается в браузере на некоторых дочерних элементах

Question

Я использую редактор кода Visual Studio и запускаю "npm run sass" в терминале bash.

Когда я делаю изменения в файле 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)

Когда я проверяю, это показывает, что стили вычисляются.

Элементы, которые не отображают изменение стиля, вложены в элемент div с атрибутом класса «tech-main». Я пытался использовать атрибуты class и id с вложенными элементами, это не имеет значения в браузере.

Я закодировал класс отдельно и вложенно. см. фрагменты кода.

Я использовал Ctrl F5 для очистки кэша.

Я попытался кодировать включаемый файл _tech.scss и использовать @import "tech" в основном scss.

Я закрыл все файлы и терминалы и перезапустил VScode несколько раз.

Я удалил родительский div и его содержимое, а затем перекодировал построчно, думая, что мой html-файл каким-то образом поврежден. Это не помогло. Я удалил родительский div и сохранил дочерние элементы, без изменений.

Я даже пытался переименовать дочерние элементы. то есть class = "tech" to 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;
  }
}