nuxt-purgecss

移除多余的 CSS! 一个简洁的 PurgeCSS Nuxt 封装器

•

•

Developmint

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) 中使用的类。此外，典型的类（例如过渡所需的类、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（目前还不行？）

webpack 模式已被移除，因为 Nuxt 3 支持 Vite 和 webpack。这样，逻辑被统一为使用 PurgeCSS 的 PostCSS 插件。不再有 mode
v1 的配置合并逻辑已被移除，转而使用 defu。无需使用函数，像往常一样编写你的值，它们将被合并。
PurgeCSS 已从 v2.x 升级到 v5.x - 请查看当前的配置选项
模块键已更改为仅 purgecss。
除了 enabled 之外，所有 purgecss 配置都可以直接写入 purgecss 对象中。
最后，查看模块的 playground 和 [当前默认值](at the default settings)！

许可证

版权所有 (c) Alexander Lichter