Reactjs 为什么我的SASS项目忽略了媒体断点？

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

我也使用引导，所以我根据

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

/* Footer.scss */

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

我制作了一个最小的可复制示例，并将其发布到codesandbox：

请尝试减小屏幕大小并检查忽略的媒体断点

我做错了什么

多谢各位

编辑：

多亏了，我可以修复自定义媒体断点

但是如何修复引导程序呢

例如，在我的

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：

---

问题在于进口订单。如果我把引导导入放在文件的末尾，一切都会按预期进行

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

主题样式覆盖基于mediaquery的样式的屏幕截图：

这应该起作用：

---

谢谢你的回复！这确实修复了我的自定义媒体断点，但是我如何修复引导断点呢？看看你的演示，不清楚你想在引导中修复什么。我在你的代码中看不到更多的断点，主题似乎对我有用（当我点击TR中的sun图标时，站点颜色会改变）。您可以指定您遇到的特定于引导的问题以及相关代码的位置吗？如果您检查沙箱，您可以看到当我们减小屏幕宽度时，列没有调整大小。对于较大的设备，预计每行有两列，对于较小的设备，每行有一列。如果您减小屏幕宽度，您将始终看到每行两列。相关的代码可能与自定义引导的类相关，但是您可以在

Home.js

文件（沙盒中的src/components/common）上看到react实现。我编辑了这个问题以提供更多细节。再次感谢！请参阅我的更新答案，其中包含如何在不同断点上调整网格中列的大小的信息。

/* 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;
    }
  }

}

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