Proper Bootstrap integration in Rails app?

Question

Ruby on Rails

Bootstrap integration in rails.
I did everything according to the instructions. I checked it ten times and redid it step by step.
In application.css.scss :

/*
 *= require_tree .
 *= require_self
*/
@import "bootstrap-sprockets";
@import "bootstrap";

So. Everything is working. Written custom styles in the scss files allocated for each of the templates overlap the bootstrap and everything works perfectly. Colors, shadows, fonts. BUT. Changing the block width with the .container class does not work
. By the way, I did not change the container class itself, but attached another class to it and changed it.
What solutions did I find. Which are crutches and work. But they are crutches for that and crutches, in order to get rid of them.
1.
application.css.scss :

/*
 *= require_tree .
 *= require_self
*/
@import "bootstrap-sprockets";
@import "bootstrap";

@import "index";

Everything would be fine, now it works, but the styles from the index.scss file are repeated twice in the browser. The first time without changing the desired width, the second time - as needed.
2.
I just created a custom.css.scss file, in it, at the beginning, I integrated the bootstrap and then wrote the styles. The downside is that for all the views of the project, writing styles in one file is suicide. Yes, I agree, it is possible to separate @imports, but it will be very strange. It is necessary to use the potential of rails.
Please help me figure this out. The fact that my styles overlap something, something does not, although they are in the same file - this is strange. It `s Magic. I wrote my crutches here, so that they would not be betrayed. Thank you.

Answer 1

If you make your application.scss file look like this:

/*
 *= require_self
 *= require_tree .
*/
@import "bootstrap-sprockets";
@import "bootstrap";

then everything will work out. The bottom line is that in this case, the bootstrap files (require_self) will be requested first, and then the files located in app/assets/stylesheets (require_tree .). By swapping the lines, you can just create files in that folder, write styles in them, and they will take precedence over the bootstrap classes, because they (the bootstrap classes) were described earlier in the file than yours.