Bootstrap 4. Minimizing CSS leads to incorrect results

Question

I installed Bootstrap 4.0-alpha with Bower, and now I have a dist directory with precompiled bootstrap.css and bootstrap.min.css. In the development environment, I try to use not a compressed version, but a mini version in the deployment. I use Laravel Elixir to accomplish my tasks. After compression, some bootstrap styles have been changed. For example, the h1 tag received "margin-top: 0.67em" (this happened because "margin-top: 0px" has a lower priority). Of course, I can just use the pre-compressed file from the dist directory, which is good enough. But if this is the problem of my minifier, I am afraid that this will lead to incorrect results in future development. So my question is why is this happening?

Answer 1

In the assembly chain, Bootstrap is used grunt-contrib-css, which uses clean-css(version 3.4.6)

An option has been installed in Gruntfile.js noAdvanced: true. As far as I understand, this is not an option for grunt-contrib-csseither clean-css. Instead, install 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
  },