Rails, bootstrap-sass
Question
I am unable to get bootstrap to work in my layout, I can't seem to figure out why. I did rm app/assets/stylesheets/application.css
Any help would be much appreciated.
Gemfile
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";
views/layouts/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>
1 answers
solution1
2 ACCPTED 2014-10-13 22:32:49
You should not remove the application.css manifest file. You should, however, change it's name to application.css.scss. This way it can be preprocessed by SASS.
If you are including the imports for bootstrap in a separate file as you do in your example (custom.css.scss), you must ensure that this file are included in the application manifest. The require_tree directive that is included by default does this (you need to have the file located in the /stylesheets directory, like you do):
#application.css or application.css.scss
*= require_tree .
However, since you are using SCSS, I recommend the following approach:
#application.css.scss
#...
#all your files and directives
#...
@import "bootstrap-sprockets";
@import "bootstrap";
This way, it is not necessary to have a separate file like custom.css.scss
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.