在 SCSS 文件中扩展 Bootstrap Utility 类

【问题标题】：Extending Bootstrap Utility class in SCSS file在 SCSS 文件中扩展 Bootstrap Utility 类
【发布时间】：2017-12-28 05:20:45
【问题描述】：

我正在尝试在我的 scss 文件中使用引导程序中的一些实用程序类。

例子

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

我正在导入这样的引导程序@import '~bootstrap/scss/bootstrap-grid.scss';

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

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

【问题讨论】：

标签： webpack bootstrap-4 webpack-3

【解决方案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 作为示例。它首先导入函数、变量和 mixin，因为它们稍后会在其他 scss 文件中使用。

【讨论】：