Rails 5：Assets + Bower + Bootstrap Sass(Rails 5: Assets + Bower + Bootstrap Sass)

网站建设910 更新时间：2025-06-08 11:28:14

SO上已经有类似的问题，但没有足够明确的回答来理解以下问题。

我的目标是使用Bower使用Bootstrap安装Rails 5。

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

vendor/assets/bower_components/bootstrap-sass

然后，我更新了初始化器/资产 ：

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）：我在boot.crap.scss中添加了bootstrap-sass / assets / stylesheets / bootstrap，但没有成功：

/* *= 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：任何了解这个问题的资源都将非常感激。

There are already similar questions on SO, but not enough clear responses to understand the following issue.

My goal is to setup Rails 5 with Bootstrap using Bower.

Using Bower I installed Bootstrap in the the folder:

vendor/assets/bower_components/bootstrap-sass

Then, I updated initializers/assets:

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

Then I added the gem 'sass-rails' to Gemfile and updated application.js:

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

The assets for JS seem to be working well: if I load http://localhost:3000/assets/application.js I can see that the Bootstrap JS part has been added there.

The problem is about Sass (SCSS): I added bootstrap-sass/assets/stylesheets/bootstrap into application.css.scss but with no success:

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

in fact if I load http://localhost:3000/assets/application.css I see:

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

(the folder specified on the @import is containing many _*.scss files and a mixins folder)

The questions are:

Do you have any ideas why this is not working? should not I see on assets/application.css all the CSS precompiled?

PS: Any resource to understand the issue would be much appreciated.

最满意答案

移动导入，因此它在/* .. */

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

Move the import, so it's outside the /* .. */

/* *= require_tree . *= require_self */ @import "bootstrap-sass/assets/stylesheets/bootstrap";Rails 5：Assets + Bower + Bootstrap Sass(Rails 5: Assets + Bower + Bootstrap Sass)