ViteおよびLightning CSSでCSSをコンパイルします

CSSの進歩を最新の状態に保つことは、多くの場合、ブラウザの互換性の問題に取り組むことを意味します。 広範囲にわたる機能がリリースされていても、ユーザーブラウザバージョンが遅れている場合があります。 これには、機能検出（

）、プログレッシブエンハンスメント、およびポリフィルを介して対処します。 ビルドツールは追加の支援を提供します。@supports

多くのCSS開発者は、既製のプロセッサー（SASS、LESS）を利用していますが、ネストやカスタムプロパティなどのネイティブCSS機能の進化により、その必要性が低下しています。 前処理者は主に組織の利点と拡張CSS機能を提供しました。 PostCSSなどのポストプロセッシングツールは、オートプレフィックスやマイニフィスなどのタスクを処理します。

典型的なビルドパイプラインには、多くの場合：

が含まれます

静的資産生成

1. アプリケーションファイルの構築
2. CSS処理は通常、最初のステップに分類され、前処理と後処理が含まれます。 現代のCSSは、前処理者への依存を減らし、プロセスを合理化する可能性があります。
vite：スピーディなCSSコンパイラ

非常に人気のあるビルドツールであるViteは、JavaScriptのフロントエンドフレームワークの構築に優れています（Angular、React、Svelte、Vue）。 その速度と適応性は、それを貴重な資産にします。 主にJavaScriptで知られていますが、ViteはJavaScriptコードを必要とせずにCSSをシームレスに処理します。 SASS（個別のインストールが必要）をサポートし、CSSを最小限の構成でネイティブにコンパイルします。 このチュートリアルでは、ノードとNPMを使用しています。 それらがインストールされていることを確認してください。 新しいプロジェクトを作成する：

基本的なテンプレートに対して「バニラ」と「JavaScript」を選択します。 IDEでプロジェクトを開きます。 このデモンストレーションでは、

、

、

、および

を削除します。

と

npm create vite@latest

のみが残る必要があります。

のコンテンツをassets/に置き換えます public/ src/Viteの依存関係をインストールしてください：.gitignore index.html package.jsonこれはindex.htmlと

を作成します。

  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Only Vite Project</title>

フォルダーを作成し、その内側に

を作成します。

タグを

npm install

：

に追加します node_modules/ package-lock.jsonいくつかのcssをstyles/：main.cssに追加します <link> index.htmlviteビルドコマンドを実行します：

  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Only Vite Project</title>
  <link rel="stylesheet" href="styles/main.css">

main.cssフォルダーには、ビルドファイルが含まれています。

（一意のハッシュを使用）は、マイニフィスされたCSSを示しています

body {
  background: green;
}

繰り返しをより速くするには、Viteの開発サーバーを使用してください：

npm run build

これにより、ポート5173でサーバーが開始されます。HTMLまたはCSSの変更は即座に反映されます。 サーバーを停止するには、

を使用してください。dist/カスケード層で整理

カスケードレイヤーを<link>タグに直接適用することは現在不可能ですが、Viteは組織の目的でこれをシミュレートすることができます。 main.cssでは、レイヤーを定義してください：

npm create vite@latest

作成reset.cssを作成し、CSSリセットをインポートします（Mayank'sなど）：

  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Only Vite Project</title>

layouts.cssレイヤーを使用してlayoutsを作成します

npm install

リンクを

およびreset.cssinlayouts.cssに追加し、目的の順序を維持します。 このアプローチは、CSSの優先順位とグループ化を管理するのに役立ちます LightningCSSを使用した後処理index.html

LightningCSSは、クロスブラウザーの互換性を高めます。インストール：

create

：

  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Only Vite Project</title>
  <link rel="stylesheet" href="styles/main.css">

vite.config.mjs

の色でテスト

body {
  background: green;
}

：

oklch main.cssLightningCSSはフォールバックを提供します。 ターゲットを絞ったブラウザのサポートの場合は、

：

npm run build

をインストールします

browserslist

：

npm run dev

を設定します

これにより、LightningCSSの機能を細かく制御できるようになります vite.config.mjs必要性？

/* styles/main.css */
@layer reset, layouts;

すべてのプロジェクトに不可欠ではありませんが、これらの手法、特に大規模なプロジェクトや設計システムでは、組織の重要な利点、クロスブラウザー互換性、CSS最適化。

以上がViteおよびLightning CSSでCSSをコンパイルしますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。