Rolldown 整合

PikaCSS 透過 @pikacss/unplugin-pikacss/rolldown 進入點與 Rolldown 整合。

安裝

pnpm

pnpm add -D @pikacss/unplugin-pikacss

npm

npm install -D @pikacss/unplugin-pikacss

yarn

yarn add -D @pikacss/unplugin-pikacss

bun

bun add -D @pikacss/unplugin-pikacss

設定 Rolldown

將 PikaCSS 插件新增至你的 Rolldown 設定：

// rolldown.config.ts
import PikaCSS from '@pikacss/unplugin-pikacss/rolldown'

export default {
	plugins: [
		PikaCSS(),
	],
}

匯入產生的 CSS

在你的應用程式進入點檔案中新增以下匯入：

// src/main.ts (or your app entry file)
import 'pika.css'

pika.css 是一個由插件在建置時期解析的虛擬模組。它指向產生的 CSS 輸出檔案（預設為 pika.gen.css）。

插件選項

所有 unplugin 轉接器共用相同的選項。完整的選項表請參閱 Rollup 整合頁面——所有打包器轉接器的選項都是相同的。

運作原理

Rolldown 轉接器是一個輕量的 createRolldownPlugin(unpluginFactory) 封裝。它與所有其他 unplugin 轉接器共用相同的轉換流程和程式碼產生邏輯。插件會：

1. 在建置期間掃描原始檔案中的 pika() 呼叫。
2. 將每個呼叫替換為產生的原子化 class 名稱字串。
3. 將原子化 CSS 規則寫入程式碼產生輸出檔案。
4. 將 pika.css 匯入解析至產生的 CSS 檔案。

下一步

• 設定