autoprefixer

Webページで開発者ツールを使用して確認すると、display: webkit-boxなど、エンコードされたことのないコンテンツが含まれています.

Web標準が推奨される前に、Google(Google)でChromeを作成したり、マイクロソフト(Microsoft)でInternet Explorerを作成したりするなど、独自のブラウザで作業できるフレームワークを作成します.これは試験的な機能を応用していると考えられます.
しかし、この機能は標準技術ではないので、webkitまたはmsのプレフィックスが使用される.これは、機能の可用性がブラウザのタイプまたはバージョンに依存するためです.
最終的には、古いブラウザで新しいテクノロジーがない場合は、webkitまたはmsから始まる공급 업체 접두사(Vendor Prefix)の方法で、最新のCSSテクノロジーが正常に動作することを保証するために保険を使用することができます.
これらのベンダー接頭辞を各プロパティごとに暗記することはほとんど不可能なので、autoprefixerのパッケージで自動的にこれらの操作を実行できます.インストール方法について説明します.

Autofrexerのインストールと設定

1.1パッケージのインストール

postcssとautoprefixerの2つのパッケージを開発するためにインストールします.

npm i -D postcss autoprefixer

1.2 package.json

package.jsonファイルでbrowerslistオプションをエンコードします.browerslistオプションは、現在のNPMプロジェクトでサポートされているブラウザの範囲を示すために使用されます.

"browserslist": [
    "> 1%",
    "last 2 versions"
  ]

これは、現在のプロジェクトで世界の1%以上を占めるすべてのブラウザの最後の2つのバージョンをサポートすることを意味します.

1.3 .postcssrc.jsファイルの作成

.postcssrc.jsポイントで始まるrc(ランタイムプロファイル)ファイル、すなわちプロファイルを作成します.コンフィギュレーションオプションまたは非表示ファイルを句点で表します.

1.4 import & export

.postcssrc.jsファイルでは、次の内容がエンコードされます.

const autoprefixer = require('autoprefixer')

module.exports = {
  plugins: [
    autoprefixer
  ]
}

主に使用されるimport、exportのキーワードはnodeです.js環境では使用できないため、CommonJSのrequire()およびmodule exportsキーワードを使用してJavaScriptファイルをインポートおよびエクスポートします.

1.5 Autofirexerバージョンのダウングレード

PostCSS plugin autoprefixer requires PostCSS 8.

上記のすべての手順を完了し、開発サーバを開こうとすると、上記のエラーメッセージが表示されます.これはautoprefixerとPostCSSのバージョンが競合しているためです.
したがって、autifrexerの10版9版に降格してください.

npm i -D autoprefixer@9

1.6開発サーバのオープン

開発サーバを開き、パッケージが正しくインストールされていることを確認します.確認の簡単な方法は、CSSファイルの要素をdisplay: flexに設定することです.以下に示すように、インストールに成功したことを示します.