4

I have installed Bootstrap 4.0-alpha with Bower and now I have a dist directory with precompiled bootstrap.css and bootstrap.min.css. In development environment I try to use not compressed version, but minified version within deployment. I use Laravel Elixir to run my tasks. After compressing, some bootstrap styles has been changed. For example, h1 tag has got "margin-top: 0.67em" (it has happened, because "margin-top: 0px" has got lower priority). Of course, I can simply use precompressed file from dist directory which is complitely fine. But if it's an issue of my minifier, I am afraid that it will lead to the wrong results in further development.So my question is why it's happening?

danopz
  • 3,310
  • 5
  • 31
  • 42
Phargelm
  • 688
  • 5
  • 16
  • FYI gulp-minify-css has been [deprecated](https://www.npmjs.com/package/gulp-minify-css) in favor of [gulp-clean-css](https://github.com/scniro/gulp-clean-css) – scniro Mar 02 '16 at 00:52

1 Answers1

3

The Bootstrap build chain uses grunt-contrib-css which uses clean-css (version 3.4.6)

In the Gruntfile.js the option noAdvanced: true had been set. As far as i do understande this is not an option for grunt-contrib-css neither clean-css. Instead advanced: false should be set:

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
  },
Bass Jobsen
  • 48,736
  • 16
  • 143
  • 224