4

I'm using Bootstrap for my Rails application with bootstrap-sass v. 3.1.1, which has been working just fine with the following in my application.css.scss file:

@import "bootstrap";

and nothing else. Just today I tried adding some of of own CSS for some added styling that I don't get with Bootstrap. It's for my welcome view/controller so I just added it to welcome.css.scss

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

From reading this section of the Rails Guides my understanding was that you could include a CSS file like welcome.css.scss in the manifest like this:

@import "bootstrap";

/*
*= require_self
*= require_tree .
*/

This did not successfully apply my CSS; nor did welcome.css.scss appear in the head tag.

As I tried to debug this I encountered a few weird things that I feel I should also point out:

1. Error importing bootstrap

The Syntastic plugin for VIM helpfully pointed out an error:

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

This is strange because

  • a) This error wasn't showing up before, despite the fact that I didn't change the line of code it refers to (@import "bootstrap")

and

  • b) bootstrap is still applied faithfully in my page layout and appears in the assets in the head tag.

2. Uninstalling bootstrap-sass

I searched for the above error and found this issue which suggested that I uninstall and reinstall bootstrap-sass. That didn't work although curiously the bootstrap styilng remained on the page even when I had uninstalled the gem.

The version of rails is 4.1.5

  1. Moving all the css to application.css.scss

Since it seems that bootstrap is being loaded from the application.css.scss somehow I added my css there but that didn't work either.

  1. Incognito mode on the browser

Finally I thought that if the bootstrap isn't going away when I uninstall bootstrap-sass then maybe they're being cached on my browser? I thought that didn't happen in development but just in case I fired up chrome in incognito mode. Still no change.

Beyond just figuring out how to solve this I'd really like to understand just what's going on here--hopefully I can get a better idea of how the rails asset pipeline works.

Improve this question

3 Answers 3

Reset to default
4

itsnikolay's answer is good, but doesn't seeem to load any other css files. If you include the line require_tree . in your application.css file, you'll load your other files.

Only issue here is that scss mixins from bootstrap may not work properly because each scss is being compiled to css before getting mixed together. (See railscast Sass basics). If you're not trying to reuse any scss mixins from bootstrap, or don't know what I'm talking about you're probably fine ignoring this and just adding the require tree line to your application.css file:

application.css

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

Otherwise, you'll want to change application.css to application.css.scss and then import using the sass @import command:

application.css.scss

/*
*= require_self
*/

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

For more basic info on how the pipeline works, check out the railscast on the asset pipeline. A little dated but definitely still useful.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

3

Check Bootstrap-Sass documentation:

Your application.css.scss must have:

/*
*= require_self
*= require_tree .
*/

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

Of course, you need bootstrap-sass gem in your Gemfile:

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

You don't need to @import Bootstrap in other scss files.

Improve this answer

1 Comment

Note: Current Bootstrap documentation says to remove all require and require_tree directives in application.css.scss and use @imports only instead.
2

Gemfile

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

application.css

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

app/assets/stylesheets/shared/bootstrap-base.scss

@import "bootstrap";
Improve this answer

3 Comments

Thanks! Just curious, do you know why the bootstrap styling didn't go away even when I'd removed the gem? That part really confused me. Also is there something particular about the versions of those gems that I should be aware of?
Probably, server is not restarted? And after removing line with bootstrap from Gemfile, not to forget run bundle again. ;)
According to the bootstrap documentation you have to remove all the all the *= require_self and *= require_tree . from app/assets/stylesheets/application.css app/assets/stylesheets/application.scss

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.