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