css - 如何在最小化编译后的 CSS 大小的同时将 Bootstrap 正确导入 SASS？

Question

前提:我正在从 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 字节。但是我不能使用任何 @extend 和 @includes。

问题:是否可以从我自己的 SASS 中扩展 Bootstrap 的类中获益，同时仅将相关部分编译为 CSS，否则依赖 CDN 服务的 Bootstrap ？

Answer 1

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

你可以使用这个结构=>

node_modules/bootstrap/bootstrap.scss

main.scss=> 1. @import 元素所需的 Bootstrap 组件。

1. @import 你的组件并扩展它。

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