为什么我的 SASS 项目不考虑媒体断点？

Question

我曾经在 React 项目中使用 CSS，但为了实现“暗模式”功能，我决定转向 SASS。

我也使用引导程序，所以我根据documentation 组织我的文件。

/* App.scss */

@import "~bootstrap/scss/bootstrap.scss";
@import './styles/_themes';
@import './styles/_fonts';


h1, h2, h3, h4, h5, h6 {
  font-family: $font-family-secondary;
  @include themed() {
    color: t($title-color)
  }
} 

p {
  font-family: $font-family-primary;

  @include themed() {
    color: t($text-color)
  }
}

hr, .nav-tabs {
  @include themed() {
    border-color: t($text-secondary-color)
  }
}

.base {
  height: 100%;
  width: 100%;
  
  @include themed() {
    background-color: t($background-color)
  }
}

.main {
  width: 750px;

  @include themed() {
    background-color: t($background-color)
  }
}

首先，我认为这是一个引导问题，但我自己的文件中也忽略了断点。

/* Footer.scss */

@media (max-width: 767px){
    #footer h5 {
        padding-left: 0;
        border-left: transparent;
        padding-bottom: 0px;
        margin-bottom: 10px;
   }
}

我做了一个最小的可重现示例并将其发布到代码沙箱：https://codesandbox.io/s/immutable-fire-qu9oe

请尝试减小屏幕尺寸并检查被忽略的媒体断点。

我做错了什么？

非常感谢！

编辑：

感谢robertp's answer 我可以修复我的自定义媒体断点。

但是如何修复引导程序？

例如，在我的navbar 中，我有一个引导类的媒体断点：

/* Navbar.scss */

@media (max-width: 571px) {
  .collapsing {
    @include themed() {
      position: absolute !important;
      z-index: 3;
      width: 100%;
      top: 75px;
    }
  }

  .collapse.show {
    @include themed() {
      display: block;
      position: absolute;
      z-index: 3;
      width: 100%;
      top: 75px;
    }
  }

  .navbar.open {
    @include themed() {
      transform: translate(0, 0)
    }
  }

  .overlay.open {
    @include themed() {
      height: 100%;
      opacity: 1;
    }
  }

}

但它没有用。另外，如何修复所有引导网格系统类？

编辑 2：

问题在于导入顺序。如果我将引导导入放在文件末尾，一切都会按预期工作！

Answer 1

这似乎是由于主题的特殊性。您的页脚 H5 元素根据主题设置样式，因此您需要覆盖它的主题版本。

覆盖基于媒体查询的样式的主题样式的屏幕截图：

这应该可行：

@media (max-width: 767px){
  #footer h5 {
    @include themed() {
      padding-left: 0;
      border-left: transparent;
      padding-bottom: 0px;
      margin-bottom: 10px;
    }
  }
}