能否在SCSS文件中@import Bootstrap Icons并通过@extend继承其样式？

Sass 默认会将后缀为 .css 的导入文件识别为原生 CSS 资源，仅生成对应的 CSS @import 规则，不会将文件内部的选择器纳入当前 Sass 编译上下文，因此你调用 @extend .bi 时 Sass 无法识别该选择器，直接抛出未找到的错误。此外如果你没有提前导入 Bootstrap 的 SCSS 文件，@extend .text-dark 也会触发同类报错。

• 方案1：强制 Sass 将 CSS 文件作为 SCSS 解析（适用于 Dart Sass 1.11 及以上版本）
  修改导入语句，添加as scss声明即可，示例代码：

// 强制解析bootstrap-icons的css文件为SCSS
@import "../node_modules/bootstrap-icons/font/bootstrap-icons.css" as scss;
// 若需要extend .text-dark 需提前导入Bootstrap SCSS
// @import "../node_modules/bootstrap/scss/bootstrap";

.right-square-icon{
  font-size: 4rem;
  @extend .bi;
  @extend .bi-caret-right-square;
  @extend .text-dark;
}

• 方案2：转存为SCSS局部文件
  将node_modules/bootstrap-icons/font/bootstrap-icons.css的完整内容复制出来，重命名为_bootstrap-icons.scss存入你的项目SCSS资源目录，直接导入该SCSS文件即可正常使用@extend。
• 方案3：改用类名组合（更轻量化的替代方案）
  不需要在SCSS中做继承，直接在HTML元素上同时绑定原生类和自定义类即可，无需修改导入规则：

<i class="bi bi-caret-right-square text-dark right-square-icon"></i>

.right-square-icon{
  font-size: 4rem;
}

该方案性能更高，也不会出现Sass编译错误。

内容的提问来源于stack exchange，提问作者th_lo