CODEWITHSUNDEEP
csstwitter-bootstrapsassgruntjs
FooBar
FooBar

Reputation: 6108

Import bootstrap in scss project + grunt + css compile load time

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;
}

Upvotes: 1

Views: 428

Answers (1)

Jscti
Jscti

Reputation: 14440

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

Upvotes: 1

Related Questions