Nuxt PurgeCSS - 移除多餘的 CSS！

功能特色

輕鬆移除不需要的 CSS
合理的預設設定
基於 purgecss 建構
支援 Nuxt 2 和 Nuxt 3 (Nuxt2 支援請暫時使用 v1.0.0)
完整測試！

設定

將 nuxt-purgecss 相依性新增至您的專案

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

將 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) 中使用的類別。此外，典型的類別（例如 transitions、nuxt link 或使用 scoped styles 時設定的類別）已經加入白名單。

這些設定應為各種專案奠定良好的基礎。

屬性深入解析

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 頁面預設會被 Purge。請確保您有適當的錯誤版面配置
請勿使用舊的 >>> 或 ::v-deep 語法。請改用 :deep

從 v1.x 遷移

⚠️ 如果您使用 Nuxt 2，您還不能更新到 v2.x (尚未？)

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

授權許可

MIT 授權許可