bootstrap-4 - 如何向 Rails 5 应用程序添加引导媒体查询和断点

Question

我正在尝试将 bootstrap 4 中的 @include media-breakpoint-down(...) mixin 与我的 Rails 5 应用程序一起使用，但是在预编译资产和在 rails 服务器中时，我不断收到以下错误。

SassC::SyntaxError: Error: no mixin named media-breakpoint-down
    on line 96:10 of app/assets/stylesheets/weeks.scss
 >> @include media-breakpoint-down(sm) {

如果我需要包含比我在下面提供的信息更多的信息，请告诉我。我对 Rails 还很陌生，我不确定我需要为这个答案包括什么。

这是我的application.scss文件：

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *
 */
$enable-validation-icons: false;
$enable-responsive-font-sizes: true;
@import "bootstrap";
@import "select2";
@import "select2-bootstrap";
@import "font-awesome";
@import "custom";
@import "forms";
@import "help-page";
@import "header";
@import "weeks";
@import "pools";

这是我尝试使用断点的文件。

周.scss

.weekMgmtGroup {
  margin: 15px 0 15px 0;
  padding: 0 0 15px 5px;
  border: 1px;
  background-color: #fff;
}

.adminWeekMgmt {
  margin-top: 10px;
  margin-bottom: 10px;
}

.weekButton {
  padding-right: 10px;
}

.gameRow {
  background-color: #fff;
  margin: 5px 0 5px 0;
  line-height: 1;
  align-items: center;
}

.awayTeamWon {
  text-align: right;
  font-size: 14px;
}

.awayScoreWon {
  text-align: right;
  font-size: 14px;
}

.awayTeamLost {
  text-align: right;
  font-size: 14px;
}

.awayScoreLost {
  text-align: right;
  font-size: 14px;
}

.homeTeamWon {
  text-align: left;
  font-size: 14px;
}

.homeScoreWon {
  text-align: left;
  font-size: 14px;
}

.homeTeamLost {
  text-align: left;
  font-size: 14px;
}

.homeScoreLost {
  text-align: left;
  font-size: 14px;
}

.gameDescriptor {
  font-size: 14px;
  text-align: center;
}

.gameDate {
  border-bottom: none;
  font-size: 16px;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.gameTime {
  text-align: left;
}

/* Game time/timezone/network styles */
.time-info {
  font-size: 12px;
  font-weight: 700;
}

.timezone-info {
  font-size: 10px;
  color: #757575;
}

.network-info {
  font-size: 12px;
  color: #757575;
}
/* Settings for phones */
@include media-breakpoint-down(sm) {
  .team-name {
    display: none;
  }
  .network-info {
    display: none;
  }
}

这是我的 Gemfile 中的相关项目：

gem 'rails', '5.2.5'
gem 'bootstrap', '4.6.0'

从在线阅读其他问题来看，我似乎需要将断点显式导入到我的 SCSS 文件中，但我找不到如何使用引导 gem 来让它工作。我尝试了以下方法，但都没有奏效。

@import "bootstrap/scss/breakpoints";
@import "~bootstrap/scss/breakpoints";

在查找引导断点文件所在的位置之后

robertr@Office-debian:/usr/local/rvm/gems/ruby-2.6.6@fbpm_test/gems/bootstrap-4.6.0/assets/stylesheets/bootstrap/mixins

然后我尝试了这个

@import "bootstrap/assets/stylesheets/bootstrap/breakpoints";   

我需要在我的本地开发环境和 Heroku 上进行这项工作。

任何帮助是极大的赞赏。

编辑 我通过更改暂时解决了这个问题

@include media-breakpoint-down(sm) { ... }

至

@media (max-width: 575.98px) { ... }

我不认为这是一个答案，因为它不能解释为什么有时会找到 mixin，而在其他时候却找不到。

我尝试过调试@import 算法，但我找不到真正深入研究rails 如何满足@import“引导程序”的源代码或文档；请求在 rails 中找到正确的文件（对不起，我对 rails 世界很陌生）。如果有人能指出我在哪里可以找到解释加载过程如何适用于资产管道和样式表的“魔法”，我将继续研究这个问题。

标签： bootstrap-4ruby-on-rails-5