Question

我已经设置了SASS和Grunt。每次保存main.scss文件时，它都会将其编译为CSS。完美。

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

@import "bootstrap";

然而，当我这样做时，每个SCSS - ＆gt; CSS 编译需要大约8秒！

是否有更智能的方法导入引导程序？我特意导入它，因为我需要使用extend，即：

.button {
    @extend .btn;
}

Answer 1

你有2个解决方案和奖金：

不要编译bootstrap。快，但你失去了@extend＆＃34; .bootstrap-class＆＃34;。但是你真的需要为此编译bootstrap吗？是不是将现有的bootstrap类添加到你的html中是一个更好的选择？
使用您需要的最小值编译bootstrap。替换：

@import "bootstrap";

通过一个包含bootstrap.scss内容的文件（在你安装的bootstrap github repo中），你只注释/取消注释你真正需要的东西：

// 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";
[...]

使用libsass（使用grunt-libsass）完全编译引导程序（或不编译解决方案＃2）并将编译时间从8s降低到0.5s

在scss项目中导入bootstrap + grunt + css编译加载时间

1 个答案: