生产与开发时的CSS差异

Question

我有一个CRA应用程序，并且正在使用SCSS。当我将应用程序部署到Netlify中时，这种样式出现了问题。正如你在下面的图片中所看到的，后面的街区被切割了，它应该一直延伸到下面。它确实在开发中扩展，但在部署时是这样的。尽管他们的造型是一样的。

​

​

这是.jsx文件：

文件Portofolio.jsx

<div className={`portofolio-app ${navShown ? "blur" : ""}`}>
  <div className="block-1"></div>
  <div className="block-2"></div>
  <div className="block-3"></div>
  <div className="portofolio">
    <div className="container">
      <Card />
    </div>
  </div>
</div>;

SCSS文件

文件portofolio.scss

.portofolio-app {
  @include app;

  .block-1,
  .block-2,
  .block-3 {
    height: 100%;
    position: absolute;
    width: 100%;
  }

  ..
  // Some other styling
  ..
}

在下面的链接中可以看到示例web：

manusiatamvan.netlify.app

Answer 1

您在这里设置卡的高度：

.portofolio-app .portofolio .card-app {
    transition: .5s cubic-bezier(.64,.57,.67,1.7);
    background-color: #2d4647;
    border-radius: 20px;
    box-shadow: 20px 30px 30px 0 rgba(0,0,0,.18), 0 4px 15px 0 rgba(0,0,0,.15);
    height: 240px;
    margin: 2em 8em;
    overflow: hidden;
    z-index: 5;
}

删除声明height: 240px;，看看这是否解决了问题。

​

Answer 2

很明显SCSS的这一行没有被读过。

@import "../Commons/_template";

.portofolio-app {
  @include app; // => This wasn't read

  .block-1,
  .block-2,
  .block-3 {
    height: 100%;
    position: absolute;
    width: 100%;
  }

  ..
  // Some other styling
  ..
}

_template.scss

@mixin app {
  min-height: 100vh;
  position: relative;

  &.blur {
    filter: blur(5px);
  }
}

当我从检查元素中设置min-height: 100vh时，它可以工作。

那为什么会发生这种事？那句话怎么没读出来？