我正在使用Visual Studio代码编辑器并在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属性与嵌套元素一起使用,这在浏览器中没有区别。

我已经分别编码和嵌套类。请参阅代码段。

我已使用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>

最佳答案

解决了:
我重命名了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;
  }
}

10-05 20:56
查看更多