如何正确地将 bootstrap 导入 SASS，同时最小化已编译的 CSS 的大小？

How to correctly import bootstrap into SASS while minimizing size of compiled CSS?

前提： 我正在从 CDN 加载 bootstrap.min.css。但我还需要将 Bootstrap 导入我的 SASS 以便 @extend 一些类和 @include 一些断点。

@import "node_modules/bootstrap/scss/bootstrap";

SASS 使用 gulp-sass 编译为 CSS。结果 style.css 然后包含所有 Bootstrap CSS，这使其膨胀到 200KB。没有@importing Bootstrap，我自己的CSS只有384字节。但是我不能使用任何 @extends 和 @includes.

问题： 是否可以从扩展 Bootstrap 的类到我自己的 SASS 中受益，而只编译相关的CSS 的部分，并依赖 CDN 服务 bootstrap 否则？

您不能同时使用 CDN bootstrap 和 SASS 版本 bootstrap。

你可以使用这个结构=>

node_modules/bootstrap/bootstrap.scss

main.scss=> 1. @import bootstrap 项目所需的组件。

@导入你的组件并扩展它。

*** 我建议只导入必要的组件。

如何正确地将 bootstrap 导入 SASS，同时最小化已编译的 CSS 的大小？

How to correctly import bootstrap into SASS while minimizing size of compiled CSS?

css

sass

twitter-bootstrap

gulp-sass