导入引导在scss项目+ grunt + css编译加载时间 [英] Import bootstrap in scss project + grunt + css compile load time

问题描述

我已设置SASS和Grunt。每次我保存我的 main.scss 文件，它将编译为CSS。完美。

现在，在的顶部main.scss 我导入bootstrap：

  @importbootstrap;然而，当我这样做时，每个SCSS  - > CSS 编译大约需要8秒   / strong>！
 
 
 
有没有更聪明的方式来导入引导？我特别导入它，因为我需要使用 extend ，即：
  .button {
 @extend .btn; 
} 
  
 
 
解决方案
奖金：
 
 
 
 
 
 
不编译引导程序。快速但你失去了@extend.bootstrap-class。但是你真的需要编译引导只是为了？不是现有的引导类添加到你的html一个更好的选择？
 
 
 
 
编译bootstrap只需要你需要的最小。替换：
 
 
 
  @importbootstrap;  
 
 
 
 
 
 
由
a文件包含bootstrap.scss的内容（在引导github的repo，你npm安装），你注释/取消注释只有你真正需要的： / p> 
 
 
  //核心变量和mixins 
 // @ import../vendor/bootstrap-sass-official/assets / stylesheets / bootstrap / variables; 
 @import../vendor/bootstrap-sass-official/assets/stylesheets/bootstrap/mixins; 
 
 //重置
 // @ import../vendor/bootstrap-sass-official/assets/stylesheets/bootstrap/normalize; 
 // @ import../vendor/bootstrap-sass-official/assets/stylesheets/bootstrap/print; 
 [...] 
  
 
 
 
 
 < http://libsass.org/ =nofollow> libsass （使用 grunt- libsass ）来编译引导完全（或不，见解决方案＃2），并将编译时间从8s降低到0.5s。 
 
 
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;
}

解决方案
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 


                        
这篇关于导入引导在scss项目+ grunt + css编译加载时间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！