検索

ホームページ >ウェブフロントエンド >CSSチュートリアル >ViteおよびLightning CSSでCSSをコンパイルします

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

Lisa Kudrow
Lisa Kudrowオリジナル
2025-03-07 16:57:11659ブラウズ

Compiling CSS With Vite and Lightning CSS

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

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

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

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

が含まれます

静的資産生成
  1. アプリケーションファイルの構築
  2. CSS処理は通常、最初のステップに分類され、前処理と後処理が含まれます。 現代のCSSは、前処理者への依存を減らし、プロセスを合理化する可能性があります。
    3. 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 サイトの他の関連記事を参照してください。

JavaScript json css less html npm sass angular postcss Static define for while select auto public delete this ide
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：アンカーポジショニングを備えた「オンボーディング」UIの1つ次の記事：アンカーポジショニングを備えた「オンボーディング」UIの1つ

関連記事

続きを見る