编译 Svelte 3.38.2 和未使用的 Bootstrap 5 SCSS

Question

This article 在 Svelte 网站上说，“编译器（在 Svelte 的情况下）可以识别和删除未使用的样式。不再有仅附加样式表！”

加载有两种选择Bootstrap SCSS:

1. 通过@import 'node_modules/bootstrap/scss/bootstrap';
加载他们所有的SCSS
2. 仅加载支持您正在使用的组件所需的内容，以确保生成的 CSS 尽可能小 here。

Svelte 的编译器是否不需要执行上面的 #2？如果我不必深入了解 Bootstrap 中我正在使用和未使用的内容的细节并且仍然获得尽可能小的生成 CSS.

，那将是非常酷的

Answer 1

Svelte 未使用的样式删除发生在组件级别。它分析组件的 <style> 标记中使用的选择器，并删除组件标记中不存在的任何内容。因此，如果您希望它删除未使用的 Bootstrap 选择器，则需要将 Bootstrap SCSS 导入每个组件，以便编译器可以分析该组件中使用了哪些选择器。由于 Bootstrap 的大小，不推荐。它会大大减慢您的构建时间，因为编译器必须分析每个组件的所有 Bootstrap 样式。此外，您最终会在组件之间得到重复的 Bootstrap 样式。

因此，我建议将 Bootstrap 添加到您的全局 SCSS 并遵循 Bootstrap 关于删除未使用样式的文档。