Rails 5：资产 + Bower + Bootstrap Sass

Question

已经有关于 SO 的类似问题，但没有足够清晰的回答来理解以下问题。

我的目标是使用 Bower 使用 Bootstrap 设置 Rails 5。

我使用 Bower 在文件夹中安装了 Bootstrap：

vendor/assets/bower_components/bootstrap-sass

然后，我更新了 initializers/assets：

Rails.application.config.assets.paths << Rails.root.join('vendor', 'assets', 'bower_components')

然后我将 gem 'sass-rails' 添加到 Gemfile 并更新了 application.js：

//= require jquery
//= require bootstrap-sass/assets/javascripts/bootstrap
//= require jquery_ujs
//= require turbolinks
//= require_tree .

JS 的资产似乎运行良好：如果我加载 http://localhost:3000/assets/application.js 我可以看到那里已经添加了 Bootstrap JS 部分。

问题在于 Sass (SCSS)： 我将 bootstrap-sass/assets/stylesheets/bootstrap 添加到 application.css.scss 但没有成功：

 /*
 *= require_tree .
 *= require_self
 @import "bootstrap-sass/assets/stylesheets/bootstrap";
 */

事实上，如果我加载 http://localhost:3000/assets/application.css 我会看到：

/*
 @import "bootstrap-sass/assets/stylesheets/bootstrap";
 */

（@import 上指定的文件夹包含许多 _*.scss 文件和一个 mixins 文件夹）

问题是：

• 您知道为什么这不起作用吗？
• 我不应该在 assets/application.css 上看到所有预编译的 CSS 吗？

PS： 任何了解该问题的资源将不胜感激。

Answer 1

移动导入，使其位于/* .. */ 之外

/*
 *= require_tree .
 *= require_self
*/

@import "bootstrap-sass/assets/stylesheets/bootstrap";

Answer 2

[删除了使用 require 而不是 import 的误导性说明，因为我错了。]

除了接受的答案之外，如果您查看bootstrap-sass/assets/stylesheets 目录，您会注意到没有文件bootstrap.scss，而是一个带有下划线前缀的文件。

另外，通常最好只从bootstrap-sass/assets/stylesheets/bootstrap/ 目录而不是_bootstrap.scss 主文件中导入您实际需要的模块。