Nuxt PurgeCSS - 刪除多餘的 CSS！

📖 釋出說明

功能

• 輕鬆刪除不需要的 CSS
• 合理的預設設定
• 基於 purgecss 構建
• 支援 Nuxt 2 和 Nuxt 3（目前 Nuxt 2 請使用 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，請使用模組的 v1 版本。

選項

預設值

在深入瞭解各個屬性之前，請檢視模組的預設設定。

預設設定將掃描常見 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 和 [當前預設值](預設設定)！

許可證

麻省理工學院許可證

版權所有 (c) Alexander Lichter