Rails 6/Bootstrap 4 类在印刷媒体中不起作用答案

【问题标题】：Rails 6/Bootstrap 4 classes don't work in print mediaRails 6/Bootstrap 4 类在印刷媒体中不起作用
【发布时间】：2020-09-22 13:35:50
【问题描述】：

我在我的应用程序中通过 Webpacker 管理 Bootstrap 4，并且已将 Bootstrap 4 命名为命名空间，因为大多数应用程序仍处于 v3 中。

我有一个文件app/javascripts/stylesheets/bs4-namespace.scss，看起来像这样：

.bs4 {
  @import "node_modules/bootstrap/scss/bootstrap-grid.scss";
}
.bs4-full {
  @import "node_modules/bootstrap/scss/bootstrap.scss";
}

然后在我的layouts/application.html.erb 我有：

  <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
  <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
  <%= stylesheet_pack_tag 'application', 'data-turbolinks-track': 'reload' %>

而application.js中的相关行是

import 'stylesheets/bs4-namespace'

这确实适用于屏幕媒体和 v4 类的正确渲染。但是，当我打印它时，Bootstrap 选择器不再有效。

什么可能导致 Bootstrap 在打印媒体中被禁用？

【问题讨论】：

你能提供一个工作的jsfiddle吗？对输出的 .bs4 类感到好奇。此外，用于打印媒体的 BS4 网格仅适用于 xs 屏幕：stackoverflow.com/questions/22199429/…

标签： bootstrap-4 ruby-on-rails-6 webpacker

【解决方案1】：

我能够弄清楚这一点。

<%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>

主要问题是未声明媒体类型。由于它不是媒体，因此仅默认为“屏幕”。因此，从 Webpacker 导入的任何 CSS 都只会应用于屏幕，而不是可以包括打印的媒体链接。有关媒体标签here的更多信息。

【讨论】：