在Rails应用程序中包含Bootstrap-Sass gem的CSS组件

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!