Question

我试图在我的scss文件中使用bootstrap中的一些实用程序类。

例如

.pageTitle { @extend .p-3, border-bottom: 1px solid red}

我正在导入像@import '~bootstrap/scss/bootstrap-grid.scss';

这样的引导程序

当我尝试在许多文件中扩展实用程序类时，我必须包含多个bootstrap.scss，当我尝试使用webpack进行捆绑时，这会增加我的包大小。它也大大增加了我的构建时间。

有没有办法将bootstrap.scss包括一次并捆绑一次？

Answer 1

您可以拥有一个主 scss 文件，其中您首先导入所需的引导程序 scss 文件，而不是包含库文件。

现在让我们调用这个“主”文件 project.scss 。因此，您的 project.scss 文件可能如下所示：

// Extended Bootstrap files
@import '~bootstrap/scss/bootstrap-grid.scss';

// Projects styles
@import "typography";
@import "my-other-styles";
// …etc…

_typography.scss 和 _my-other-styles.scss 文件与 project.scss 文件位于同一目录中。这样，您的所有文件都可以访问导入的Bootstrap文件中定义的内容。

您还可以查看 bootstrap.scss 作为示例。它首先导入函数，变量和mixins，因为稍后将在其他 scss 文件中使用它们。

在SCSS文件中扩展Bootstrap Utility类

1 个答案: