1

I have setup SASS and Grunt. Every time I save my main.scss file, it will compile it to CSS. Perfect.

Now, in the top of main.scss I import bootstrap:

@import "bootstrap";

However, when I do this, each SCSS -> CSS compile takes around 8 seconds!

Is there a smarter way to import bootstrap? I specially import it, because I need to make use of extend, i.e.:

.button {
    @extend .btn;
}
FooBar
  • 5,752
  • 10
  • 44
  • 93
  • the whole bootstrap styles is something like 8000 lines, no wonder it takes a while; how about using a CDN or just compiling-importing the styles you're customizing – maioman Feb 20 '15 at 14:06

1 Answers1

1

You have 2 solutions and a bonus :

  • don't compile bootstrap. Quick but you lose the @extend ".bootstrap-class". But do you really need to compile bootstrap just for that? Isn't adding the existing bootstrap classes to your html a better option ?

  • compile bootstrap with just the minimum you need. Replace :

    @import "bootstrap";

by a file containing the content of bootstrap.scss (in the bootstrap github repo that you npm-installed) where you comment/uncomment only what you really need :

// Core variables and mixins
//@import "../vendor/bootstrap-sass-official/assets/stylesheets/bootstrap/variables";
@import "../vendor/bootstrap-sass-official/assets/stylesheets/bootstrap/mixins";

// Reset
//@import "../vendor/bootstrap-sass-official/assets/stylesheets/bootstrap/normalize";
//@import "../vendor/bootstrap-sass-official/assets/stylesheets/bootstrap/print";
[...]
  • use libsass (with grunt-libsass) to compile bootstrap entirely (or not, see solution #2) and lower compilation time from 8s to something like 0.5s
Jscti
  • 14,096
  • 4
  • 62
  • 87