无法将引导 5 变量导入 SASS 模块，而从引导程序 4 导入工作正常

Question

我们有一个带有SASS模块的React项目。我必须在项目中从版本4升级到版本5引导。有一些文件(*.module.scss)包含以下CSS类:

.active {
@extend .mt-1;
}

扩展mt-1类Bootstrap类和其他类Bootstrap导入如下:

@import "~bootstrap/scss/mixins";
@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/utilities";

这适用于Bootstrap 4，但不适用于Bootstrap 5。错误显示为SassError: The target selector was not found. Use "@extend .mt-1 !optional" to avoid this error.。我尝试了其他CSS类，如。fw-bold，总是得到同样的错误。怎么了?如何在Bootstrap 5导入变量?我不能导入整个Bootstrap@import "~bootstrap/scss/bootstrap";，因为我会得到错误Selector ":root" is not pure-:根选择器不能在SASS模块中使用。

Answer 1

问题解决了!对于Bootstrap 5，我也必须导入@import "~bootstrap/scss/utilities/api";。以下是如何将Bootstrap 5导入到SASS模块(*.module.scss):

@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/mixins";
@import "~bootstrap/scss/utilities";
@import "~bootstrap/scss/utilities/api";

现在我可以扩展@extend .shadow-sm;和其他类。