Rails，引导-sass答案

【问题标题】：Rails, bootstrap-sassRails，引导-sass
【发布时间】：2014-10-14 06:32:49
【问题描述】：

我无法让引导程序在我的布局中工作，我似乎无法弄清楚原因。我做了 rm app/assets/stylesheets/application.css

任何帮助将不胜感激。

宝石文件

source 'https://rubygems.org'

ruby '2.1.2'
# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '4.2.0.beta2'
# Use postgresql as the database for Active Record
gem 'pg'

gem 'rails_12factor', group: :production
gem 'bootstrap-sass', '~> 3.2.0'
gem 'autoprefixer-rails'
# Use SCSS for stylesheets
gem 'sass-rails', '~> 5.0.0.beta1'
# Use Uglifier as compressor for JavaScript assets
gem 'uglifier', '>= 1.3.0'
# Use CoffeeScript for .js.coffee assets and views
gem 'coffee-rails', '~> 4.0.0'
# See https://github.com/sstephenson/execjs#readme for more supported runtimes
# gem 'therubyracer', platforms: :ruby

# Use jQuery as the JavaScript library
gem 'jquery-rails', '~> 4.0.0.beta2'
# Turbolinks makes following links in your web application faster. Read more: https://github.com/rails/turbolinks
gem 'turbolinks'
# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
gem 'jbuilder', '~> 2.0'
# bundle exec rake doc:rails generates the API under doc/api.
gem 'sdoc', '~> 0.4.0', group: :doc

# Use ActiveModel has_secure_password
# gem 'bcrypt', '~> 3.1.7'

# Use Unicorn as the app server
# gem 'unicorn'

# Use Capistrano for deployment
# gem 'capistrano-rails', group: :development

group :development, :test do
  # Call 'debugger' anywhere in the code to stop execution and get a debugger console
  gem 'pry-rails'
  gem 'byebug'

  # Access an IRB console on exception pages or by using <%= console %> in views
  gem 'web-console', '~> 2.0.0.beta4'

  # Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring
  gem 'spring'
end

app/assets/stylesheets/custom.css.scss

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

视图/布局/application.html.erb

<!DOCTYPE html>
<html>
  <head>
    <title>THE BLOGGER</title>
    <%= stylesheet_link_tag 'application', media: 'all',
                                           'data-turbolinks-track' => true %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
    <%= csrf_meta_tags %>
    <!--[if lt IE 9]>
      <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/r29/html5.min.js">
      </script>
    <![endif]-->
  </head>
  <body>
    <header class="navbar navbar-fixed-top navbar-inverse">
      <div class="container">
        <nav>
          <ul class="nav navbar-nav pull-right"></ul>
        </nav>
      </div>
    </header>
    <div class="container">
      <%= yield %>
    </div>
  </body>
</html>

【问题讨论】：

标签： ruby-on-rails twitter-bootstrap

【解决方案1】：

您不应删除 application.css 清单文件。但是，您应该将其名称更改为 application.css.scss。这样就可以被SASS预处理了。

如果您像在示例 (custom.css.scss) 中那样将引导程序的导入包含在单独的文件中，则必须确保该文件包含在应用程序清单中。默认情况下包含的 require_tree 指令会执行此操作（您需要将文件放在 /stylesheets 目录中，就像您一样）：

#application.css or application.css.scss
*= require_tree .

但是，由于您使用的是 SCSS，我推荐以下方法：

#application.css.scss
#...
#all your files and directives
#...
@import "bootstrap-sprockets";
@import "bootstrap";

这样，就不需要像custom.css.scss这样的单独文件

【讨论】：

非常感谢您的帮助