Nuxt.js

Nuxt.js 预设了使你的 Vue.js 应用开发变得愉快所需的所有配置。Nuxt.js 可以生成通用、单页和静态生成的应用。

你可以通过使用 Nuxt.js 插件或 PostCSS 插件在 Nuxt.js 中使用 PurgeCSS。

Nuxt.js 插件

你可以使用名为 nuxt-purgecss 的社区模块，使得在 Nuxt 中使用 PurgeCSS 变得尽可能简单。通过其恰当的默认值，你只需对配置进行很少的更改（或根本不需要）。

安装

使用 yarn 或 npm 将 nuxt-purgecss 依赖添加到你的项目
在 nuxt.config.js 的 modules 部分添加 nuxt-purgecss：

{
  buildModules: [ // 如果你使用的是 nuxt < 2.9.0，请改用 modules 属性。
    'nuxt-purgecss',
  ],

  purgeCSS: {
   // 在此处添加你的设置
  }
}

选项

默认值

在深入研究各个属性之前，以下是模块的默认设置：

{
  mode: MODES.webpack,
  enabled: ({ isDev, isClient }) => (!isDev && isClient), // 或在开发/调试模式下为 `false`
  paths: [
    'components/**/*.vue',
    'layouts/**/*.vue',
    'pages/**/*.vue',
    'plugins/**/*.js'
  ],
  styleExtensions: ['.css'],
  whitelist: ['body', 'html', 'nuxt-progress'],
  extractors: [
    {
      extractor: content => content.match(/[A-z0-9-:\\/]+/g) || [],
      extensions: ['html', 'vue', 'js']
    }
  ]
}

这些设置应该是各种项目的良好基础。

合并默认值

你可以将每个选项定义为函数或静态值（原语、对象、数组等）。如果使用函数，默认值将作为第一个参数提供。

如果你不使用函数定义属性，模块将尝试将它们与默认值合并。这对于 paths、whitelist 等很有用，因为默认值相当明智。如果不想包含默认值，只需使用函数。

深入属性

mode

类型：String（webpack 或 postcss）
默认值：webpack

定义 PurgeCSS 应使用的模式。

Webpack 模式只能与 build.extractCSS: true 一起使用
PostCSS 模式只能与 build.postcss 对象（非数组）或默认设置一起使用

enabled

类型：Boolean 或 Function（仅适用于 webpack 模式，将接收 build.extend ctx）
默认值：({ isDev, isClient }) => (!isDev && isClient)（仅在生产模式下激活）或在调试/开发模式下为 false

启用/禁用模块

如果评估为 false，模块将根本不会被激活
如果提供了函数，它将在 webpack 模式下正确评估（在 postcss 模式下将被视为 true）

PurgeCSS 选项

请阅读 PurgeCSS 文档以获取有关 PurgeCSS 相关信息的信息。

我们使用 paths 而不是 content 来指定 PurgeCSS 应查看的路径（此处有解释）。这适用于两种模式，不仅仅是 webpack 模式。

PostCSS 插件

使用 extractCSS 选项，Nuxt 将创建浏览器将单独加载的 CSS 文件。在生成应用时，这可能会生成许多小文件。

要将 CSS 包含在 HTML 文件的标头中，你需要运行以下命令。请注意，使用此配置，PurgeCSS 将在生产和开发模式下处于活动状态。

:::: code-group ::: code-group-item NPM

npm i -D @fullhuman/postcss-purgecss

::: ::: code-group-item YARN

yarn add @fullhuman/postcss-purgecss --dev

::: ::::

'@fullhuman/postcss-purgecss': {
  content: ['./pages/**/*.vue', './layouts/**/*.vue', './components/**/*.vue'],
  safelist: ['html', 'body']
}