如何从Bootstrap 5中单独导入指定的utility工具类

方式一：Sass自定义编译（推荐，体积可控） #

首先安装Bootstrap 5 npm包：
npm install bootstrap@5

新建自定义SCSS文件（如custom-bootstrap-utils.scss），按如下顺序编写内容，无需导入全量Bootstrap：

// 导入核心基础依赖（必须项，缺少会导致工具类生成逻辑报错）
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/maps";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/utilities";

// 仅保留你需要的工具类，此处示例只保留所有margin相关类
$utilities: map-merge(
  $utilities,
  (
    "margin": map-get($utilities, "margin"),
    "margin-top": map-get($utilities, "margin-top"),
    "margin-end": map-get($utilities, "margin-end"),
    "margin-bottom": map-get($utilities, "margin-bottom"),
    "margin-start": map-get($utilities, "margin-start"),
    "margin-x": map-get($utilities, "margin-x"),
    "margin-y": map-get($utilities, "margin-y"),
  )
);

// 触发工具类生成，最终只会输出你上面声明保留的类
@import "bootstrap/scss/utilities/api";

你可以根据需求调整保留的工具类，不需要的直接从上面的map里删掉即可。如果需要自定义间距值、响应式规则，可以在导入variables之后、合并$utilities之前覆盖对应变量：

• 覆盖$spacers变量可以调整间距档位对应的数值
• 可以单独关闭某类工具类的响应式能力减小体积，示例如下：

$utilities: map-merge(
  $utilities,
  (
    // 关闭margin-top的响应式生成，只会输出mt-*，不会输出md:mt-*这类断点类
    "margin-top": map-merge(map-get($utilities, "margin-top"), (responsive: false)),
  )
);

方式二：无Sass环境的简易方案 #

你可以直接从Bootstrap预编译的CSS文件中提取所有margin相关的样式规则，单独存为CSS文件使用。margin类的命名规则为m{t|b|s|e|x|y}-{断点可选}-{间距档位}，提取时注意不要漏了对应响应式断点的媒体查询代码块即可。

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