在前端开发中，使用 Bootstrap 的情形非常普遍，而 Bootstrap 4 引入了一个名为 "reboot" 的模块用于处理浏览器样式的一致性。然而，如果你想在自己的项目中使用 reboot，你需要把它导入到你的样式表里。
这才是问题所在：你需要手动导入这些样式，这是一项繁琐的工作，如果你不慎遗漏了一些样式，就会让你的页面出现错误的显示。
幸运的是，有一个名为 bootstrap-reboot-importer 的 npm 包可以帮助你自动将 reboot 样式导入到你的项目中。
下面是使用 bootstrap-reboot-importer 的详细教程：
安装
首先，你需要在项目的根目录下安装这个包：
npm install bootstrap-reboot-importer
导入
某些样式表已经具有了 Bootstrap 的样式，那么在这些情况下，你可能不想将整个 Bootstrap 包导入，而只需要把 reboot 导入你的样式表即可。为了实现这一点，你只需要在你的样式表中插入下面的代码即可：
@import '~bootstrap-reboot-importer';
如果你使用的是 Sass，你可以在你的 Sass 文件中这样导入：
@import '~bootstrap-reboot-importer';
这将会自动将 reboot 样式导入到你的样式表中。
配置
你也可以根据你对 Bootstrap 的个性化需求进行配置。例如，如果你希望改变一些全局变量，你可以在你的项目中创建一个 _custom-variables.scss 文件，然后在你的样式表中这样导入：
@import '~bootstrap-reboot-importer'; @import 'custom-variables';
示例代码
下面发一些示例代码。如果你的样式表中没有任何 Bootstrap 的样式，你只需要在样式表中导入 bootstrap-reboot-importer 即可：
/* main.css */
@import '~bootstrap-reboot-importer';
body {
background-color: #333;
color: white;
}下面是一个使用 Sass 实现的示例。我们将全局变量声明在 _custom-variables.scss 文件中：
-- -------------------- ---- ------- -- ---------------------- -- --------------- ----- ----------------- ----- -- --------- -- ------- ----------------------------- ------- -------------------- ---- - ----------------- ----------------- ------ --------------- -
总结
借助 bootstrap-reboot-importer 这个 npm 包，我们可以方便地将 Bootstrap 的 reboot 样式导入到我们的个人项目中，并根据个性化需求进行定制。这使得我们可以更专注于项目本身的开发，而不是在样式中花费太多的时间。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600668efd9381d61a3540d20