在SCSS文件中扩展Bootstrap实用程序类

Question

我正在尝试在我的SCSS文件中使用Bootstrap中的一些实用程序类。

示例

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

我像这样的 @import '~bootstrap/scss/bootstrap-grid.scss';

导入引导程序

当我尝试将实用程序类扩展到许多文件中时，我必须将Bootstrap.scs包括在多个文件中，当我尝试使用WebPack捆绑时，我的捆绑包大小会增加我的捆绑包大小。这也大大增加了我的构建时间。

有没有办法将bootstrap.scss包括一次并将其包装一次？

Answer 1

您可以拥有一个主 scss 文件，其中首先导入所需的bootstrap 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.scsss.scss 文件处于同一目录。这样，您所有的文件都可以访问导入的Bootstrap文件中定义的内容。

您也可以以 bootstrap.scss 为例。它首先导入函数，变量和混合素，因为这些功能在其他 scss 文件中使用。