Nuxt PurgeCSS - 删除多余的 CSS！

📖 发布说明

功能

• 轻松删除不需要的 CSS
• 合理的默认设置
• 基于 purgecss 构建
• 支持 Nuxt 2 和 Nuxt 3（目前使用 v1.0.0 获取 Nuxt2 支持）
• 完全测试！

设置

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. 最后，查看模块的游乐场和 [当前默认值](模块的默认设置)！

许可证

MIT 许可证

版权所有 (c) Alexander Lichter