css - 在 scss 元素中导入 bootstrap + grunt + css 编译加载时间

Question

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

现在，在 main.scss 的顶部，我导入 Bootstrap :

@import "bootstrap";

但是，当我这样做时，每个 SCSS -> CSS 编译大约需要 8 秒!

有没有更智能的导入 Bootstrap 的方法？我特地引入了它，因为我需要使用extend，即:

.button {
    @extend .btn;
}

Answer 1

您有 2 个解决方案和一个奖励:

• 不要编译 Bootstrap 。很快，但是您丢失了@extend“.bootstrap-class”。但是你真的需要为此编译 bootstrap 吗？将现有的 Bootstrap 类添加到您的 html 不是更好的选择吗？

• 只用您需要的最低限度编译 Bootstrap 。替换:

  @import "bootstrap";

由 一个包含 bootstrap.scss 内容的文件(在你 npm 安装的 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 )完全编译 Bootstrap (或不编译，参见解决方案 #2)并将编译时间从 8 秒缩短到 0.5 秒