2

I am new to rails and was following this tutorial https://launchschool.com/blog/integrating-rails-and-bootstrap-part-1#css_preprocessors when I got to the part of adding bootstrap by adding 

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

at the very bottom of application.css.sass it all worked perfectly fine. However, I had a line of code

html, body{background:#000;color:#FFF;}

that wasn't being respected. After looking around, I realized that it's because of my application file:

/*
 * 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 any plugin's vendor/assets/stylesheets directory 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 bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *
 *= require_tree .
 *= require_self
 *= require custom
 */
@import "bootstrap-sprockets"
@import "bootstrap"

I understand that since "bootstrap" is at the very bottom, that is the css that the website uses, however, if I move it to the top or in any other spot, I get an error page. Is there another way for me to import bootstrap or for me to override the page?

Improve this question
2
  • If you're using the .sass syntax then html, body { background:#000;color:#FFF; } isn't valid for one. You can also refer to the Bootstrap-SASS Docs for Ruby implementations. Commented Feb 11, 2017 at 1:07
  • I wanted to ask you if you have an update. Thanks Fabrizio Commented Mar 13, 2017 at 8:08

1 Answer 1

Reset to default
1

I quote https://github.com/rails/sprockets#the-require_self-directive

The require_self Directive

require_self tells Sprockets to insert the body of the current source file before any subsequent require directives.

This means that if your require_self and then import bootstrap, as CSS stands for cascade style sheets, the last style will always be applied plus rules of css specificity. Read about css specificity at the following link http://cssspecificity.com/

You can try setting !important to test if the problem is solved. An alternative would be including as suggested your css or scss code in a separate file:

*= require_tree .
 *= require_self
 *= require custom
 */
@import "bootstrap-sprockets"
@import "bootstrap"
@import "my-css-style"

If you still have doubts, check how the application.css.scss is loaded at localhost:3000/assets/application.css.scss to see how the different stylesheets are loaded in one file, then also work with debug on chrome/firefox, disable all the styles until you figure out which one is overriding.

enter image description here

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

Comments

Your Answer

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