CSS3 パッケージ化後にプレフィックスプラグインを自動的に追加する方法の詳細な説明: autoprefixer

vue-cli で構築されたプロジェクト スキャフォールディングでは、すでに autoprefixer が設定されているため、変更を加えなくてもプレフィックスが自動的に追加されます。

自動プレフィックスプラグインに関連するいくつかの構成を見てみましょう。

1. Postcssの設定は.postcssrc.jsに記述されます。

2. ブラウザルールはpackage.jsonに記述されます。

3. 開発環境（build/webpack.dev.conf.js）スタイル関連ローダー

4. 本番環境（build/webpack.prod.conf.js）スタイル関連ローダー

上記の構成設定は、cli スキャフォールディング環境の構築時に設定されているため、自分で設定する必要はありません。

vue-cliの開発環境と本番環境はどちらもpostcssを使用しており、設定は同じです

ここで問題があります。インターネット上の一部のブロガーは、プロジェクトがパッケージ化される前と後の CSS プレフィックスが一貫していないと述べています。

--app.vue の img にスタイルを追加します

画像{
 ディスプレイ: フレックス;
 変換: translateX(200px)
}

--パッケージ化前のimgのスタイル（開発環境）

--パッケージ化後のimgのスタイル（つまり本番環境）

上記から、パッケージ化前後の要素の CSS プレフィックスが一致していないことがわかります。

次に、解決策を示します。

上記の通り、vue-cli の開発環境と本番環境はどちらも postcss を使用しており、構成も同じなのに、なぜパッケージ化前後の要素の CSS プレフィックスが一致しないのでしょうか。

ロックの問題

build/webpack.dev.conf.js と build/webpack.prod.conf.js の 2 つのファイルを解析して比較することができます。CSS に影響を与えるのは、モジュール内のスタイルを処理するローダーと、CSS を処理するプラグインだけです。上記から、プレフィックスに影響を与える postcss のローダーは 2 つのリンクで一貫していることがわかります。そのため、問題は CSS を処理するプラグインにあることがわかります。

調査の結果、webpack.prod.conf.js 設定に次の 2 つの CSS 処理プラグインがさらに存在することが判明しました。

ExtractTextPlugin は、CSS ファイルを抽出して分離するために使用されます。CSS プレフィックスには影響しません。除外すると、問題は OptimizeCSSPlugin プラグインにロックされます。さらに、OptimizeCSSPlugin プラグインをコメント アウトしてパッケージ化し、テストしたところ、開発環境と本番環境の CSS プレフィックスが同じであることがわかりました。これで完了です。 ！ ！

npmの公式サイトに行ってこの人を検索してみましょう

https://www.npmjs.com/package/optimize-css-assets-webpack-plugin

これは CSS コードを最適化および圧縮するためのプラグインですが、ドキュメントがほとんどないのは残念です。

しかし、私たちは一つの重要な一文に気づきました。

この製品は、CSS 形式、プレフィックスなどの処理を最適化するためにも使用される cssnano に依存しています。 autoprefixer 構成パラメータもあります。autoprefixer を見つけるには、公式 Web サイト https://cssnano.co/ にアクセスしてください。

ここでの翻訳は次のとおりです: ブラウザのオプションに従って不要なプレフィックスを削除します。デフォルトでは CSS ファイルに新しいプレフィックスが追加されないので、問題は解決します。プラグインの自動プレフィックス機能 (デフォルトでは true になっているはずです) は不要と判断されたプレフィックスを削除しますが、postcss の自動プレフィックス機能は設定したブラウザ全体のプレフィックスを追加するため、競合は完全に解決されます。

問題を解決する

これを無効にして競合を回避するには、build/webpack.prod.conf.js ファイルの OptimizeCSSPlugin プラグインの cssProcessorOptions プロパティに autoprefixer: false を追加します。

上記のコード:

新しいOptimizeCSSPlugin({
  cssProcessorOptions: config.build.productionSourceMap
   ? { safe: true、 map: false、 autoprefixer: false }
   : { 安全: true、自動プレフィックス: false }
 }）、

結論は

最後に、開発版とビルド版の CSS プレフィックスを見てみましょう。これらは一貫しているはずです。

問題の原因は次のとおりです: OptimizeCSSPlugin は cssnano に依存しており、cssnano にも autoprefixer 構成パラメータがあります。これは不要なプレフィックスを削除するために使用されます (一部のブラウザでは必要なプレフィックスを誤って削除します)。これは postcss の autoprefixer 効果と競合するため、無効になっています。パッケージ化されたものは、設定したブラウザ範囲のプレフィックスと一致するようになりました。

ネット上のブロガーの設定によると、確かに開発環境とテスト環境のプレフィックスを全く同じにできるのですが、調べてみるとその必要はないことがわかりました。問題の前提はプレフィックスの不一致ではありません。その設定は、現在のブラウザに合わないプレフィックスが表示されないようにするだけです。スタイルはそのまま有効です。特に大きな問題でなければ、設定を変える必要はないと個人的には思っています。

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。