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 を応援していただければ幸いです。 |
<<: Dockerイメージを完全にアンインストールする手順
>>: 1 つの記事で JSON (JavaScript Object Notation) を理解する
目次1. 関数シグネチャ2. 関数のオーバーロード2.1 オーバーロードされたシグネチャは呼び出し可...
序文通常のユーザーはcrontabスケジュールタスクを定義します。たとえば、Oracleユーザーはス...
1. HBaseの概要1.1 HBaseとはHBase は、高い信頼性、高いパフォーマンス、列ストレ...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1...
MySQL には、10 進数などの標準データ型だけでなく、float や double などの非標...
数日前、バスで仕事に行きました。バスのカードリーダーの実際の使用シーンを実際に見て、カードリーダーの...
考えられる解決策1. Math.randomは[0,1)の範囲の乱数を生成します。 //今回は生成さ...
1. 環境: MySQL-5.0.41-win32 Windows XP プロフェッショナル2. テ...
(I)ウェブページのカラーマッチングの基本概念(1)白黒の言葉は永遠のテーマです。誰もそれを悪く言う...
スペースを購入してウェブサイトを構築したことがある友人なら、ウェブサイトは正式に開設する前に登録する...
この記事では、JS掃海プロジェクトの概要を参考までに紹介します。具体的な内容は次のとおりです。プロジ...
序文Linux システムをインストールした後の最も一般的なタスクは、ネットワーク構成です。もちろん、...
MySQL の explain コマンドは SQL のパフォーマンスを分析できます。その 1 つが ...
目次JVM クラスローダーTomcat クラスローダークラスを検索ロードクラスクラスをロードしようと...
今回は、コンピューターや携帯電話用の rtmp ライブ ブロードキャスト サーバーを設定し、ライブ ...