ViteおよびLightning CSSでCSSをコンパイルします
）、プログレッシブエンハンスメント、およびポリフィルを介して対処します。 ビルドツールは追加の支援を提供します。@supports
典型的なビルドパイプラインには、多くの場合：
が含まれます静的資産生成
- アプリケーションファイルの構築
- CSS処理は通常、最初のステップに分類され、前処理と後処理が含まれます。 現代のCSSは、前処理者への依存を減らし、プロセスを合理化する可能性があります。 vite：スピーディなCSSコンパイラ
基本的なテンプレートに対して「バニラ」と「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フォルダーには、ビルドファイルが含まれています。
body {
background: green;
}
npm run build
を使用してください。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
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;
以上がViteおよびLightning CSSでCSSをコンパイルしますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7889
15
1650
14
1411
52
1302
25
1248
29
Vue 3
Apr 02, 2025 pm 06:32 PM
それは＆＃039; Vueチームにそれを成し遂げてくれておめでとうございます。それは大規模な努力であり、長い時間がかかったことを知っています。すべての新しいドキュメントも同様です。
ブラウザから有効なCSSプロパティ値を取得できますか？
Apr 02, 2025 pm 06:17 PM
私はこの非常に正当な質問で誰かに書いてもらいました。 Leaは、ブラウザから有効なCSSプロパティ自体を取得する方法についてブログを書いています。それはこのようなものです。
粘着性のあるポジショニングとサスのダッシュを備えた積み重ねられたカード
Apr 03, 2025 am 10:30 AM
先日、Corey Ginnivanのウェブサイトから、この特に素敵なビットを見つけました。そこでは、スクロール中にカードのコレクションが互いに積み重ねられていました。
WordPressブロックエディターでのマークダウンとローカリゼーションを使用します
Apr 02, 2025 am 04:27 AM
WordPressエディターでユーザーに直接ドキュメントを表示する必要がある場合、それを行うための最良の方法は何ですか？
レスポンシブデザインのブラウザを比較します
Apr 02, 2025 pm 06:25 PM
これらのデスクトップアプリがいくつかあり、目標があなたのサイトをさまざまな次元ですべて同時に表示しています。たとえば、書くことができます
スティッキーヘッダーとフッターにCSSグリッドを使用する方法
Apr 02, 2025 pm 06:29 PM
CSS Gridは、レイアウトをこれまで以上に簡単にするように設計されたプロパティのコレクションです。何でもするように、少し学習曲線がありますが、グリッドは
Googleフォント変数フォント
Apr 09, 2025 am 10:42 AM
Google Fontsが新しいデザイン（ツイート）を展開したようです。最後の大きな再設計と比較して、これははるかに反復的です。違いをほとんど伝えることができません
