如何让Sass仅生成自定义代码块CSS，排除Bootstrap导入未使用内容？

直接导入完整的Bootstrap模块（比如forms）会把该模块下所有样式都编译输出，哪怕你只用到其中一小部分。要只保留自定义样式所需的代码，可以试试以下几种Sass层面的解决方案：

1. 用Bootstrap的Mixin直接构建样式（推荐） #

Bootstrap的核心样式大多是通过Mixin实现的，与其@extend已有的类，不如直接调用对应的Mixin生成你需要的样式，这样完全不会引入无关代码。

示例代码：

// 导入Bootstrap核心依赖
@use "bootstrap/functions" as fn;
@use "bootstrap/variables";
@use "bootstrap/variables-dark";
@use "bootstrap/mixins";

// 自定义表单输入框样式
.bs-form input {
  // 基础form-control样式
  @include mixins.form-control();
  // 应用form-control-lg的尺寸样式
  @include mixins.form-control-size(
    variables.$input-padding-y-lg,
    variables.$input-padding-x-lg,
    variables.$input-font-size-lg,
    variables.$input-border-radius-lg
  );
}

这种方式完全由你控制生成的样式，只会输出.bs-form input相关的规则，不会混入form-select等未使用的组件代码。

2. 按需导入Bootstrap源码的局部片段 #

如果你坚持要用@extend，别导入完整的bootstrap/forms模块，而是从Bootstrap的_forms.scss源码中，只复制.form-control和.form-control-lg的定义部分到你的项目中（或者单独创建一个局部导入文件）。

比如提取的代码片段大概是这样：

// 仅复制你需要的类定义
.form-control {
  @include mixins.form-control();
}

.form-control-lg {
  @include mixins.form-control-size(
    $input-padding-y-lg,
    $input-padding-x-lg,
    $input-font-size-lg,
    $input-border-radius-lg
  );
}

然后在你的代码中导入这个局部文件，再用@extend：

.bs-form input {
  @extend .form-control;
  @extend .form-control-lg;
}

这样编译时只会处理这两个类相关的样式，不会带出其他表单组件的代码。

3. 改用Bootstrap的模块化按需导入（Bootstrap 5+） #

Bootstrap 5的Sass采用了更细粒度的模块化拆分，你可以只导入forms模块中与form-control相关的子模块（如果有的话）。不过要注意模块间的依赖关系，确保所有需要的变量和Mixin都已导入。

比如，检查Bootstrap源码中forms目录下的子文件，只导入_form-control.scss（如果存在），而不是整个_forms.scss。

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