Bootstrap CSS loading with bootstrap-sass, other CSS won't load

Question

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

3. 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.

4. 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.

Answer 1

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.