生产与开发时的 CSS 差异

Question

我有一个 CRA 应用程序并且正在使用 SCSS。当我将应用程序部署到 Netlify 时，样式出现了问题。正如你在下面这张图片中看到的那样，后面的块被切割了，它应该一直向下拉伸。它确实在开发中延伸，但在部署时它是这样的。即使它们具有相同的样式。

这是 .jsx 文件：

文件Portfolio.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
  ..
}

示例网页见以下链接：

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 时，它可以工作。

那么为什么会这样呢？为什么没有读取该行？