Bootstrap 4. CSS 缩小产生错误的结果

Question

我已经用 Bower 安装了 Bootstrap 4.0-alpha，现在我有一个包含预编译 bootstrap.css 和 bootstrap.min.css 的 dist 目录。在开发环境中，我尝试不使用压缩版本，而是在部署中使用缩小版本。我使用 Laravel Elixir 来运行我的任务。压缩后，部分 bootstrap 样式已更改。例如，h1 标签获得了 "margin-top: 0.67em"（它发生了，因为 "margin-top: 0px" 获得了较低的优先级）。当然，我可以简单地使用 dist 目录中的预压缩文件，这完全没问题。但如果这是我的 minifier 的问题，我担心它会导致进一步的错误结果 development.So 我的问题是为什么会这样？

Answer 1

Bootstrap 构建链使用 grunt-contrib-css，后者使用 clean-css（版本 3.4.6）

在 Gruntfile.js 中设置了选项 noAdvanced: true。据我所知，这不是 grunt-contrib-css 和 clean-css 的选项。相反 advanced: false 应该设置为：

cssmin: {
  options: {
    // TODO: disable `zeroUnits` optimization once clean-css 3.2 is released
    //    and then simplify the fix for https://github.com/twbs/bootstrap/issues/14837 accordingly
    compatibility: 'ie9',
    keepSpecialComments: '*',
    sourceMap: true,
    advanced: false
  },

Bootstrap 4. CSS 缩小产生错误的结果

Bootstrap 4. CSS minification produces wrong results

gulp

laravel-elixir

bootstrap-4

gulp-clean-css

gulp-minify-css