gulp - Bootstrap 4. CSS の縮小により間違った結果が生成される

Question

Bootstrap 4.0-alpha を Bower と共にインストールしました。これで、コンパイル済みの bootstrap.css と bootstrap.min.css を含む dist ディレクトリができました。開発環境では、圧縮版ではなく、展開内で縮小版を使用するようにしています。Laravel Elixir を使用してタスクを実行しています。圧縮後、いくつかのブートストラップ スタイルが変更されました。たとえば、h1 タグには "margin-top: 0.67em" があります ("margin-top: 0px" の優先度が低いために発生しています)。もちろん、完全に問題のない dist ディレクトリから事前に圧縮されたファイルを使用することもできます。しかし、それが私のミニファイヤの問題である場合、今後の開発で間違った結果につながるのではないかと心配しています.だから私の質問は、なぜそれが起こっているのですか?

Answer 1

Bootstrap ビルド チェーンはgrunt-contrib-csswhich uses 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
  },