Bootstrap 4，scss @import 生成与 getbootstrap.com 上的原始文件不同的文件

Question

我在我的项目中使用node-sass。

您可以尝试使用两个版本（alpha6 和 beta）的简单 style.scss 文件：

@import "./node_modules/bootstrap/scss/bootstrap";

然后输入：

node-sass style.scss style.css

你会有一个不同的 .btn 类的 css：

- getbootstrap.com (https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.css) 上的原始版本

.btn {
  display: inline-block;
  font-weight: normal;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  border: 1px solid transparent;
  padding: 0.5rem 0.75rem;
  font-size: 1rem;
  line-height: 1.25;
  border-radius: 0.25rem;
  transition: all 0.15s ease-in-out;
}

- 生成一个

.btn {
  display: inline-block;
  font-weight: normal;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  user-select: none;
  border: 1px solid transparent;
  padding: 0.5rem 0.75rem;
  font-size: 1rem;
  line-height: 1.25;
  border-radius: 0.25rem;
  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

看看这个：

transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;

为什么会有这种差异？

由于这个问题，按钮上的“禁用”属性不再有过渡，您可以在此处看到：https://plnkr.co/edit/LSeKKSaB2Lk2JMtoFi9K?p=preview

Answer 1

简而言之，您的构建过程（基于您的描述）仅包括 Bootstrap 在发布之前对其 .sass 文件所做的部分操作。

Bootstrap 除了将 Sass 编译为 CSS 之外，还使用 ​​Autoprefixer 等工具来修复最常见的跨供应商 CSS 问题，例如，向某些属性添加供应商前缀（参见 .btn 中的 user-select ）。您只是错过了这一步，因此您的结果文件看起来有点不同。

来源：http://getbootstrap.com/docs/4.0/getting-started/build-tools/#tooling-setup