时间戳

首页 > 解决方案 > 如何使用 Sass 生成 Bootstrap 样式

bootstrap-4 - 如何使用 Sass 生成 Bootstrap 样式

问题描述

我下载了 npm bootstrap 包，进入node_modules/bootstrap/dist/css/bootstrap.css，查看.alert-danger样式：

.alert-danger {
  color: #721c24;
  background-color: #f8d7da;
  border-color: #f5c6cb;
}

当我搜索这些颜色代码时，它们不会出现在任何其他文件中。这些代码在哪里定义/计算？我对使用 Sass 自定义这些值很感兴趣，我试图将特异性覆盖作为我最后的手段。

标签： bootstrap-4sass

解决方案

您可以在文件中找到主要颜色node_modules/bootstrap/scss/_variables.scss，但 dist bootstrap.css 文件中的颜色与 _variables.scss 中的颜色不同，

bootstrap 从 _variables.scss 中的主要颜色生成 dist 颜色：


lighten($table-dark-bg, 7.5%)

darken($link-color, 15%)

rgba($red, .1)

推荐阅读