Bootstrap CSS加载bootstrap-sass，其他CSS不会加载

Question

我正在使用Bootstrap for my Rails应用程序和bootstrap-sass v.3.1.1，它在我的application.css.scss文件中使用了以下内容：

@import "bootstrap";

没有别的。 就在今天，我尝试添加一些自己的CSS来添加一些我没有使用Bootstrap的样式。 这是我的欢迎视图/控制器所以我只是将它添加到welcome.css.scss

.complete-class {
  text-decoration: line-through;
}

通过阅读Rails指南的这一部分，我的理解是您可以在清单中包含一个像welcome.css.scss这样的CSS文件，如下所示：

@import "bootstrap";

/*
*= require_self
*= require_tree .
*/

这没有成功应用我的CSS; welcome.css.scss也没有出现在head标签中。

当我试图调试这个时，我遇到了一些奇怪的事情，我觉得我也应该指出：

1.导入引导程序时出错

VIM的Syntastic插件有助于指出错误：

File to import not found or unreadable: bootstrap. Load path: /home/stephen/code/blocitoff/app/assets/stylesheets

这很奇怪，因为

• a）之前没有出现过这个错误，尽管我没有更改它引用的代码行（@import“bootstrap”）

和

• b）bootstrap仍忠实地应用于我的页面布局，并出现在head标签的资产中。

2.卸载bootstrap-sass

我搜索了上面的错误，发现这个问题表明我卸载并重新安装bootstrap-sass。 虽然奇怪的是，即使我卸载了宝石，引导设备仍然保留在页面上，但这并没有奏效。

rails的版本是4.1.5

3. 将所有css移动到application.css.scss

因为看起来我正在从application.css.scss加载bootstrap，所以我在那里添加了我的css，但这也没有用。

4. 在浏览器上隐身模式

最后我想如果卸载bootstrap-sass时引导程序没有消失那么可能它们被缓存在我的浏览器上了？ 我认为在开发过程中没有发生这种情况，但以防我在隐身模式下启动了chrome。 仍然没有变化。

除了弄清楚如何解决这个问题之外，我真的很想了解这里发生了什么 - 希望我能更好地了解rails资产管道的工作原理。

Answer 1

itsnikolay的答案很好，但不会加载任何其他的CSS文件。 如果包含require_tree .行require_tree . 在您的application.css文件中，您将加载其他文件。

这里唯一的问题是来自bootstrap的scss mixins可能无法正常工作，因为每个scss在被混合在一起之前被编译为css。 （参见railscast Sass基础知识 ）。 如果你没有尝试重用bootstrap中的任何scss mixins，或者不知道我在说什么，你可能会忽略这一点，只需将require树行添加到application.css文件中：

application.css

/*
*= require shared/bootstrap-base
*= require_tree . #This line specifically is what will load the other .scss
*= require_self
*/

否则，您需要将application.css更改为application.css.scss，然后使用sass @import命令导入：

application.css.scss

/*
*= require_self
*/

 @import "bootstrap-sprockets";
 @import "bootstrap";
 @import "my_custom_css_file";
 @import "my_second_custom_css_file";
 #etc...

有关管道如何工作的更多基本信息，请查看资产管道上的railscast 。 有点过时但绝对有用。

Answer 2

检查Bootstrap-Sass文档 ：

您的application.css.scss必须具有：

/*
*= require_self
*= require_tree .
*/

@import "bootstrap-sprockets";
@import "bootstrap";

当然，你需要在你的Gemfile bootstrap-sass gem：

gem 'bootstrap-sass', '~> 3.2.0'
gem 'sass-rails', '>= 3.2'
gem 'autoprefixer-rails' # not necessary, but recommended

您不需要在其他scss文件中使用@import Bootstrap。

Answer 3

的Gemfile

gem 'bootstrap-sass', '~> 3.2.0'
gem 'sass-rails', '>= 3.2'

application.css

/*
*= require shared/bootstrap-base
*= require_self
*/

应用程序/资产/样式表/共享/自举-base.scss

@import "bootstrap";