在 Rails 5.2 中将 Bootstrap 导入为 SCSS答案

【问题标题】：Importing Bootstrap as SCSS in Rails 5.2在 Rails 5.2 中将 Bootstrap 导入为 SCSS
【发布时间】：2020-05-24 03:47:14
【问题描述】：

我有一个正在尝试改进的旧版 Rails 应用程序。我有一组要导入的样式，其中一个是 Bootstrap 4。

我有以下文件app/assets/stylesheets/application.scss

尝试使用require_tree . 会导致一些错误，所以我想从引导程序开始一一进行。

在我的 Gemfile 中：gem 'bootstrap'

在上面提到的application.scss：

/*
*= require_self
*/

// Bootstrap
@import 'bootstrap';

有趣的是，虽然从这个文件/文件夹集导入“有效”，如果应用程序出现问题，但如果一切顺利，就像引导导入一样，在实际网站上没有 .css 文件正在进口的。

在 Rails 5.2 中设置和导入 sass 文件和引导库的 tl;dr 是什么？

它应该很简单，但我已经把头撞在墙上好几个小时了。为什么编译后样式不显示？

有没有一个你能想到的网站示例，我可以查看并查看使用 scss 的差异？它应该是愚蠢的简单，但它只是没有显示编译结果。

【问题讨论】：

如果您需要的只是 CSS 用于 Bootstrap，那么我一直发现使用 CDN 比尝试像您正在做的那样手动操作更容易。它也可以帮助您的客户；如果它在另一个站点的缓存中，那么您的站点将加载得更快。不过，这种方法有支持也有反对。
@anothermh 其余（大量）样式都在 scss 中，所以这是不行的。
您是否同时拥有.scss 和.css 文件？请记住，css 是有效的 scss，因此应更改所有扩展名。最可能的问题是混合import and require，这可能会导致多个问题。
@MarkMerritt 请展开，不清楚您的意思 - 您是在谈论 url 名称和单独的文件还是单个文件？
您是否按照README的指示进行操作？

【解决方案1】：

既然您提到了 rails 5.2（不是 rails 6），那么以下步骤可能适用于您的环境

在您的 app/assets/stylesheets/application.css

中

/*
*= require_self
*= require main
*/

它使用css文件但调用main.scss（位于同一文件夹中）

然后在 app/assets/stylesheets/main.css 您可以使用 import 导入任何 scss

// bootstrap
@import "bootstrap";
// basic scss 
@import "basic/bodi_and_font.scss";
@import "basic/datepicker.scss";

我正在使用 bootstrap 4 及更高版本是我在特定文件夹中导入的一些示例附加 scss

【讨论】：

【解决方案2】：

Rails 5.2 改变了它处理由 sprockets 编译的目标结果文件的方式，它可能与：

【讨论】：