如何在不导入Bootstrap的情况下用SCSS扩展其类？

问题根源 #

SCSS的@extend要求编译器能找到目标选择器的定义代码，如果不导入Bootstrap的SCSS文件，编译器根本不知道.rounded-pill、.btn这些类的属性是什么，加!optional只是跳过错误，自然不会生成对应的样式。而直接导入Bootstrap模块（比如_buttons.scss）会把模块里生成Bootstrap类的代码全部打包到你的CSS里，这就和你用CDN引入Bootstrap的初衷冲突了。

正确解决方案：用Bootstrap的混合宏（Mixin）替代@extend #

Bootstrap的绝大多数工具类和组件类都是用Mixin实现的，你只需要导入对应的Mixin文件和变量文件，就能在自定义类里调用Mixin生成属性，不会把Bootstrap的类代码打包进去。

示例1：实现.custom-class继承Bootstrap样式

修改你的sample.scss：

// 先导入Bootstrap的变量文件（Mixin依赖变量）
@import '../node_modules/bootstrap/scss/_variables';
// 导入需要的Mixin文件
@import '../node_modules/bootstrap/scss/mixins/_rounded';
@import '../node_modules/bootstrap/scss/mixins/_border';
@import '../node_modules/bootstrap/scss/mixins/_background';

.custom-class {
    // 用@include调用Mixin替代@extend
    @include rounded-pill();
    @include border();
    @include bg-color($light); // $light是Bootstrap定义的浅色变量
}

示例2：实现.custom-close继承.btn和.btn-close

修改你的custom-close.scss：

@import '../node_modules/bootstrap/scss/_variables';
// 导入按钮和关闭按钮对应的Mixin文件（不是生成类的_buttons.scss）
@import '../node_modules/bootstrap/scss/mixins/_buttons';
@import '../node_modules/bootstrap/scss/mixins/_close';

.custom-close {
    @include btn();
    @include btn-close();
    padding: 0;
}

为什么这个方法可行？ #

• Mixin只是属性模板，不会主动输出任何CSS代码，只有当你用@include调用时，才会把Mixin里的属性注入到你的自定义类中。
• 你只导入了必要的Mixin和变量，编译后的CSS里只会有你的自定义类样式，完全不会包含Bootstrap的原生类代码，避免了和CDN加载的Bootstrap重复。
• 直接复用Bootstrap的Mixin能保证你的自定义类样式和CDN版本的Bootstrap完全一致，不用手动复制属性，也不会出现版本差异导致的样式不一致。

注意事项 #

• 不同Bootstrap版本的Mixin路径和名称可能略有差异，比如Bootstrap 5的Mixin都在scss/mixins/目录下，变量统一在_variables.scss里，你可以根据自己使用的版本调整导入路径。
• 如果某个样式没有对应的Mixin（极少数情况），你可以直接复制Bootstrap类的属性到自定义类里，确保和CDN版本一致即可。

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