Including css components of bootstrap-sass gem in rails app

Question

I have in my Gemfile including gem 'bootstrap-sass' and in app/assets/stylesheets/custom.css.scss I have at the top @import "bootstrap";

But this includes all the css of bootstrap bloating the css file download size. Is there a way to include just the css components of bootstrap that I am using?

Answer 1

When you importing "bootstrap" style, acctualy you are importing this file from gem: bootstrap.scss

As you can see It's only importing other files, so you can replace: @import "bootstrap"; with:

// Core variables and mixins
@import "bootstrap/variables"; // Modify this for custom colors, font-sizes, etc
@import "bootstrap/mixins";
// …
// Components: common
@import "bootstrap/sprites";
@import "bootstrap/dropdowns";

Answer 2

Try using minified CSS code. Also when you import your bootstrap file it will import all of it, why do you want just the CSS components when you are have the custom CSS file to work with!