web-dev-qa-db-ja.com

Angular 7でAutoprefixerを設定するにはどうすればよいですか？

Angular 7 Projectで自動プレフィックスを使用しています。しかし、ブラウザーのdevtoolsを開いて、適用されたスタイルとして表示フレックスを持つクラス「simple-content」で要素をフォーカスすると、予期されません。 'prefixes'。Angular 4-6プロジェクトでは、これは問題なく機能します。

ステップ1：サーブを実行するステップ2：ブラウザーのdevtoolsを開き、display：flexを持つクラス「simple-content」で要素をフォーカスします。

Package.jsonに私は持っています

 {
    "browserslist": [
    "last 1 version",
    "> 1%"
    ]
  }. 

In package-lock.json I have 

    "autoprefixer": {
      "version": "9.4.4",
      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-9.4.4.tgz",
      "integrity": "sha512-7tpjBadJyHKf+gOJEmKhZIksWxdZCSrnKbbTJNsw+/zX9+f//DLELRQPWjjjVoDbbWlCuNRkN7RfmZwDVgWMLw==",
      "requires": {
        "browserslist": "^4.3.7",
        "caniuse-lite": "^1.0.30000926",
        "normalize-range": "^0.1.2",
        "num2fraction": "^1.2.2",
        "postcss": "^7.0.7",
        "postcss-value-parser": "^3.3.1"
      },

flexbox with/* autoprefixer：on * /で自動プレフィックスを有効にしようとしましたが、結果がありません。

Cssファイルに私は持っています

.simple-content {
    display: flex;
}

期待される結果 ：

.simple-content {
  display: -webkit-box;    
  display: -moz-box;      
  display: -ms-flexbox;   
  display: -webkit-flex;   
  display: flex;             
}
angularflexboxprefixautoprefixervendor-prefix
3
Yordan Penev

オンラインの自動プレフィックスツール（ https://autoprefixer.github.io/ ）を試して、package.jsonで使用したブラウザーリストをテストし、プレフィックス付きのcssが生成されないことを確認しました。 did not yield prefixed css

ブラウザリストの値を最後の2バージョンに変更すると、自動接頭辞付きのcssが生成されました。 did generate prefixed css

したがって、package.jsonは問題ないようで、ブラウザリストを更新するだけで試すことができます。

また、参考までに、angular cli V7.3.5が追加されましたsrc/browserslistこれは、追加する必要がないことを意味します。browserslistrcまたはbrowserslistプロパティをpackage.jsonfor angular 7つのプロジェクト。サポートするために最後の行でnotを削除するだけですIE 9-11 。

4
Kapil Bhagat