用Vite和Lightning CSS編譯CSS

>與CSS進步保持最新狀態通常意味著要努力處理瀏覽器兼容性問題。 即使具有廣泛的功能發行，用戶瀏覽器版本也可能落後。 我們通過特徵檢測（@supports），進行性增強和多填充來解決此問題。 構建工具提供額外的幫助。

>許多CSS開發人員使用預處理程序（SASS，更少），但隨著天然CSS功能（例如嵌套和自定義屬性）的演變，其必要性卻減少了。 前處理器主要提供組織福利並擴展CSS功能。 後處理工具，例如PostCSS，處理諸如自動預裝和縮小之類的任務。

>

>典型的構建管道通常涉及：

1. >靜態資產生成
2. >應用程序文件構建
3. 捆綁以部署

> CSS處理通常屬於第一步，包括預處理和後處理。 現代CSS減少了對預處理器的依賴，可能會簡化該過程。

vite：快速的CSS編譯器

Vite是一種非常受歡迎的構建工具，在構建JavaScript前端框架（Angular，React，Svelte，Vue）方面表現出色。 它的速度和適應性使其成為寶貴的資產。 雖然主要以JavaScript為名，但Vite無縫處理CSS而無需JavaScript代碼。 它支持SASS（需要單獨的安裝），並以最少的配置為生編譯CSS。

本教程使用節點和NPM。 確保安裝它們。 創建一個新項目：

npm create vite@latest

>選擇“香草”和“ javaScript”作為基本模板。 在您的IDE中打開項目。 對於此演示，刪除

，assets/，public/和src/。 僅保留.gitignore和index.html。 用以下方式替換package.json的內容 index.html

>安裝Vite的依賴項：

  <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標籤到styles/>：main.css> <link> index.html將一些CSS添加到

：

  <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運行vite build命令：

body {
  background: green;
}

文件夾包含構建文件。

npm run build

（具有唯一哈希）顯示了縮小的CSS。

>為了更快的迭代，請使用Vite的開發服務器：dist/ assets/index.css

>這在端口5173上啟動了服務器。 HTML或CSS的更改會立即反映。 使用

停止服務器。

>用級聯層組織

>當前不可能將級聯層直接應用於<link>標籤時，VITE允許我們為組織目的進行模擬。 在main.css中，定義層：

npm create vite@latest

createreset.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 layer：layouts>

npm install

>在>和reset.css，以維護所需的順序。 這種方法有助於管理CSS的優先級和分組。 layouts.css> 使用LightningCSS index.html進行後處理 > LightningCSS增強了跨瀏覽器的兼容性。安裝它：

創建

：

  <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.css：

npm run build

configurebrowserslist：

npm run dev

這允許對LightningCSS功能進行細粒度的控制。 vite.config.mjs>必要性？

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

>對所有項目都不重要，但這些技術（尤其是對於較大的項目或設計系統）在組織，跨瀏覽器兼容性和CSS優化方面具有顯著優勢。

以上是用Vite和Lightning CSS編譯CSS的詳細內容。更多資訊請關注PHP中文網其他相關文章！