Question

您好我一直在关注Michael Hartl开发rails应用程序的书。我已经到了最后，我想开始在我开发的应用程序中使用Bootstrap3。

我已按照https://github.com/twbs/bootstrap-sass上的说明操作，但这没有用。宝石已正确安装，我可以通过更改我的application.css - ＆gt;来使其在我的本地环境中工作。 application.css.scss并将import“bootstrap”语句添加到文件中，并将其放在custom.css.scss中。这似乎不对，当我部署到Heroku时它也不起作用。

我正在努力工作的设置如下。

宝石文件

source "http://rubygems.org"

ruby '2.0.0'

gem 'rails', '4.0.1'
gem 'sass-rails'
gem 'bootstrap-sass'
gem 'bcrypt-ruby', '3.1.2'
gem 'faker', '1.1.2'
gem 'will_paginate'
gem 'bootstrap-will_paginate'
gem 'sprockets', '2.11.0'
gem 'pg'

gem 'uglifier'
gem 'coffee-rails'
gem 'jquery-rails'
gem 'turbolinks'
gem 'jbuilder'

group :development, :test do 
  gem 'rspec-rails'
  gem 'guard-rspec'
  gem 'spork-rails'
  gem 'guard-spork'
  gem 'childprocess'
end

group :test do
  gem 'selenium-webdriver'
  gem 'capybara'
  gem 'growl'
  gem 'factory_girl_rails', '4.2.1'
end

group :doc do
  gem 'sdoc', require: false
end

group :production do
  gem 'rails_12factor'
end

application.css

/*
* This is a manifest file that'll be compiled into application.css, which will include all    the files
* listed below.
*
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
* or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
*
* You're free to add application-wide styles to this file and they'll appear at the top of the
* compiled file, but it's generally better to create a new file per style scope.
*
*= require_self
*= require_tree .
*/

custom.css.scss

@import "bootstrap";

/*mixins, variables etc. */
$grayMediumLight: #eaeaea;

@mixin box_sizing{
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
/* universal */

html {
  overflow-y: scroll;
}

body {
  padding-top: 60px;
}
...
...

理想情况下，我认为我应该将application.css更改为.css.scss，并在我的custom.css.scss中导入bootstrap而不需要它。这在部署到Heroku时会导致错误，也就是说已经需要application.css。

更新

根据我删除的建议

Import "bootstrap";

从custom.css.scss

并将其添加到重命名的application.css.scss中。这看起来像 @import "bootstrap"; @import "custom";

我使用

清除了tmp文件夹

rake tmp:clear

然后刷新页面。

单独导入css.scss文件似乎解决了我的问题

Answer 1

我会尝试您自己提出的解决方案，即使用application.css.scss代替application.css并使用@import代替require，如{{3}中所述}：

如果你想使用多个Sass文件，你通常应该使用 Sass @import规则而不是这些Sprockets指令。运用 Sprockets指令所有Sass文件都存在于自己的范围内，使变量或混合仅在文档中可用你可以使用@import＆＃34; ＆＃34;进行文件通配。和@import＆＃34; * / *＆＃34;添加整个树等效于如何 require_tree有效。有关详细信息，请查看sass-rails文档和重要的警告。

检查sass-rails＆＃39; rails guide了解更多信息。

Answer 2

尝试使用

https://github.com/seyhunak/twitter-bootstrap-rails

请注意选择bootstrap3分支，例如

gem "twitter-bootstrap-rail", git: "git@github.com:seyhunak/twitter-bootstrap-rails.git", branch: "bootstrap3"

将Rails应用程序升级到bootstrap3

2 个答案: