Nuxt PurgeCSS - 移除多餘的 CSS！

📖 發行說明

功能

• 輕鬆移除不需要的 CSS
• 健全的預設設定
• 基於 purgecss 構建
• 支援 Nuxt 2 和 Nuxt 3 (目前對於 Nuxt2 的支援請使用 v1.0.0)
• 經過完整測試！

設定

1. 將 nuxt-purgecss 依賴項新增至您的專案

yarn add --dev nuxt-purgecss # or npm install --save-dev nuxt-purgecss

2. 將 nuxt-purgecss 新增至 nuxt.config.{js,ts} 的 modules 區段

export default {
  modules: [
    // Simple usage
    'nuxt-purgecss',

    // With options
    ['nuxt-purgecss', { /* module options */ }],
  ]
}

⚠️ 如果您使用的是 Nuxt 2，請使用模組的 1 版本。

選項

預設值

在深入探討各個屬性之前，請查看模組的 預設設定。

預設值將掃描您常用 Nuxt 資料夾中的所有 .vue、.js 和 .ts 檔案，並檢查您的 nuxt.config.js (或 .ts) 中使用的類別。此外，典型的類別（例如轉換所需的類別、nuxt 連結的類別或使用範圍樣式時設定的類別）已經被加入白名單。

這些設定應該是各種專案的良好基礎。

屬性深入解析

enabled

• 類型: Boolean
• 預設值: !nuxt.options.dev (在 nuxt dev 期間停用，否則啟用)

設定為 true 時啟用模組。

PurgeCSS 選項

請閱讀 PurgeCSS 文件，以了解有關 PurgeCSS 的相關資訊。

範例

預設設定

// nuxt.config.js
export default {
  modules: [
    'nuxt-purgecss',
  ]
}

自訂選項

//nuxt.config.js
export default {
  modules: [
    'nuxt-purgecss',
  ],

  purgecss: {
    enabled: true, // Always enable purgecss
    safelist: ['my-class'], // Add my-class token to the safelist (e.g. .my-class)
  }
}

注意事項

• 別忘了新增不在常用資料夾中的頁面和元件的路徑（例如第三方套件）
• 預設產生的 500 和 404 頁面將預設被清除。請確保您有適當的錯誤版面配置
• 請勿使用舊的 >>> 或 ::v-deep 語法。請改用 :deep

從 v1.x 遷移

⚠️ 如果您使用 Nuxt 2，您無法更新到 v2.x（目前？）

1. 已移除 webpack 模式，因為 Nuxt 3 支援 Vite 和 webpack。這樣一來，邏輯統一使用 PurgeCSS 的 PostCSS 外掛程式。不再有 mode
2. 已移除 v1 的設定合併邏輯，改用 defu。請像平常一樣撰寫您的值，而不是使用函式，它們將會被合併。
3. PurgeCSS 已從 v2.x 升級到 v5.x - 請檢查目前的 設定選項
4. 模組金鑰已變更為 purgecss。
5. 除了 enabled 之外，所有 purgecss 設定都可以直接寫入 purgecss 物件中。
6. 最後，請查看模組的 playground 和 [目前的預設值](在預設設定中)！

授權條款

MIT 授權條款

版權所有 (c) Alexander Lichter