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，请使用模块的第 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 和 [当前默认值](默认设置)！

许可证

麻省理工学院许可证

版权所有 (c) Alexander Lichter