ViteおよびLightning CSSでCSSをコンパイルします-CSSチュートリアル-php.cn

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

Lisa Kudrow

リリース： 2025-03-07 16:57:11

オリジナル

656 人が閲覧しました

Compiling CSS With Vite and Lightning CSS

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

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

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

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

が含まれます

静的資産生成

アプリケーションファイルの構築

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と

を作成します。

<!DOCTYPE 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ビルドコマンドを実行します：

<!DOCTYPE html>


  <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など）：

<!DOCTYPE html>


  <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

：

<!DOCTYPE html>


  <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 サイトの他の関連記事を参照してください。

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

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

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