我如何准确知道要包含哪些 Bootstrap SCSS 资产?

发布于 2025-01-10 05:00:26 字数 3404 浏览 0 评论 0原文

根据 Bootstrap 文档,当我们想要包含 SASS 模块时,我们应该

// Custom.scss
// Option B: Include parts of Bootstrap

// 1. Include functions first (so you can manipulate colors, SVGs, calc, etc)
@import "../node_modules/bootstrap/scss/functions";

// 2. Include any default variable overrides here

// 3. Include remainder of required Bootstrap stylesheets
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

// 4. Include any optional Bootstrap components as you like
@import "../node_modules/bootstrap/scss/root";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
@import "../node_modules/bootstrap/scss/images";
@import "../node_modules/bootstrap/scss/containers";
@import "../node_modules/bootstrap/scss/grid";

// 5. Add additional custom code here

使用目录 bootstrap/scss 包含所有这些文件:

-a----        26-10-1985     10:15           2621 _accordion.scss
-a----        26-10-1985     10:15           1474 _alert.scss
-a----        26-10-1985     10:15            624 _badge.scss
-a----        26-10-1985     10:15            923 _breadcrumb.scss
-a----        26-10-1985     10:15           2969 _button-group.scss
-a----        26-10-1985     10:15           2232 _buttons.scss
-a----        26-10-1985     10:15           4800 _card.scss
-a----        26-10-1985     10:15           5625 _carousel.scss
-a----        26-10-1985     10:15           1127 _close.scss
-a----        26-10-1985     10:15           1196 _containers.scss
-a----        26-10-1985     10:15           5501 _dropdown.scss
-a----        26-10-1985     10:15            256 _forms.scss
-a----        26-10-1985     10:15          10621 _functions.scss
-a----        26-10-1985     10:15            602 _grid.scss
-a----        26-10-1985     10:15            266 _helpers.scss
-a----        26-10-1985     10:15           1158 _images.scss
-a----        26-10-1985     10:15           4552 _list-group.scss
-a----        26-10-1985     10:15            899 _mixins.scss
-a----        26-10-1985     10:15           5658 _modal.scss
-a----        26-10-1985     10:15           2668 _nav.scss
-a----        26-10-1985     10:15           7536 _navbar.scss
-a----        26-10-1985     10:15           1933 _offcanvas.scss
-a----        26-10-1985     10:15           1681 _pagination.scss
-a----        26-10-1985     10:15            859 _placeholders.scss
-a----        26-10-1985     10:15           4402 _popover.scss
-a----        26-10-1985     10:15           1169 _progress.scss
-a----        26-10-1985     10:15          12571 _reboot.scss
-a----        26-10-1985     10:15           1880 _root.scss
-a----        26-10-1985     10:15           1521 _spinners.scss
-a----        26-10-1985     10:15           4215 _tables.scss
-a----        26-10-1985     10:15           1168 _toasts.scss
-a----        26-10-1985     10:15           2608 _tooltip.scss
-a----        26-10-1985     10:15            425 _transitions.scss
-a----        26-10-1985     10:15           1344 _type.scss
-a----        26-10-1985     10:15          14038 _utilities.scss
-a----        26-10-1985     10:15          67864 _variables.scss

如何准确知道要包含哪些资产?有表格解释一下吗?

According to Bootstrap documentation, when we want to include SASS modules, we should use

// Custom.scss
// Option B: Include parts of Bootstrap

// 1. Include functions first (so you can manipulate colors, SVGs, calc, etc)
@import "../node_modules/bootstrap/scss/functions";

// 2. Include any default variable overrides here

// 3. Include remainder of required Bootstrap stylesheets
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

// 4. Include any optional Bootstrap components as you like
@import "../node_modules/bootstrap/scss/root";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
@import "../node_modules/bootstrap/scss/images";
@import "../node_modules/bootstrap/scss/containers";
@import "../node_modules/bootstrap/scss/grid";

// 5. Add additional custom code here

The directory bootstrap/scss has all these files:

-a----        26-10-1985     10:15           2621 _accordion.scss
-a----        26-10-1985     10:15           1474 _alert.scss
-a----        26-10-1985     10:15            624 _badge.scss
-a----        26-10-1985     10:15            923 _breadcrumb.scss
-a----        26-10-1985     10:15           2969 _button-group.scss
-a----        26-10-1985     10:15           2232 _buttons.scss
-a----        26-10-1985     10:15           4800 _card.scss
-a----        26-10-1985     10:15           5625 _carousel.scss
-a----        26-10-1985     10:15           1127 _close.scss
-a----        26-10-1985     10:15           1196 _containers.scss
-a----        26-10-1985     10:15           5501 _dropdown.scss
-a----        26-10-1985     10:15            256 _forms.scss
-a----        26-10-1985     10:15          10621 _functions.scss
-a----        26-10-1985     10:15            602 _grid.scss
-a----        26-10-1985     10:15            266 _helpers.scss
-a----        26-10-1985     10:15           1158 _images.scss
-a----        26-10-1985     10:15           4552 _list-group.scss
-a----        26-10-1985     10:15            899 _mixins.scss
-a----        26-10-1985     10:15           5658 _modal.scss
-a----        26-10-1985     10:15           2668 _nav.scss
-a----        26-10-1985     10:15           7536 _navbar.scss
-a----        26-10-1985     10:15           1933 _offcanvas.scss
-a----        26-10-1985     10:15           1681 _pagination.scss
-a----        26-10-1985     10:15            859 _placeholders.scss
-a----        26-10-1985     10:15           4402 _popover.scss
-a----        26-10-1985     10:15           1169 _progress.scss
-a----        26-10-1985     10:15          12571 _reboot.scss
-a----        26-10-1985     10:15           1880 _root.scss
-a----        26-10-1985     10:15           1521 _spinners.scss
-a----        26-10-1985     10:15           4215 _tables.scss
-a----        26-10-1985     10:15           1168 _toasts.scss
-a----        26-10-1985     10:15           2608 _tooltip.scss
-a----        26-10-1985     10:15            425 _transitions.scss
-a----        26-10-1985     10:15           1344 _type.scss
-a----        26-10-1985     10:15          14038 _utilities.scss
-a----        26-10-1985     10:15          67864 _variables.scss

How to know exactly which assets to include? Is there any table explaining?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

小猫一只 2025-01-17 05:00:26

绝大多数可选文件都是特定于组件的。您可以通过浏览文档的组件部分来决定是否需要给定组件。

例如, _accordion.scss 对应于 Accordion 组件。计划使用它吗?包括它!如果没有,请跳过它。

任何不是组件的内容都记录在 Bootstrap 的布局(例如 _grid.scss)、内容(例如 _type.scss)、表单、帮助程序或实用程序部分中。

您可以在 Bootstrap 文档中找到所有这些内容。查看目录或使用每个内容的搜索功能。

The vast majority of the optional files are component-specific. You can decide whether you want a give component by browsing the component section of the docs.

For example, _accordion.scss corresponds to the Accordion Component. Planning to use it? Include it! If not, skip it.

Anything that's not a component is documented in Bootstrap's sections on Layout (e.g. _grid.scss), Content (e.g. _type.scss), Forms, Helpers, or Utilities.

You can find all of these in the Bootstrap docs. Look at the table of contents or use the search functionality for each.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文