我正在尝试在我的 scss 文件中使用引导程序中的一些实用程序类。
例子
.pageTitle { @extend .p-3, border-bottom: 1px solid red}
我正在像这样导入引导程序@import '~bootstrap/scss/bootstrap-grid.scss';
当我尝试在许多文件中扩展实用程序类时，我必须在多个文件中包含 bootstrap.scss，这会在我尝试使用 webpack 进行捆绑时增加我的包大小。它也大大增加了我的构建时间。
有没有办法包含bootstrap.scss一次并捆绑一次？
您可能有一个主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文件中使用。