PurgeCSS

Nuxt.js

Nuxt.js 预设了所有必要的配置，让您在开发 Vue.js 应用程序时享受乐趣。Nuxt.js 可以生成通用、单页和静态生成应用程序。

您可以通过使用 Nuxt.js 插件在新窗口中打开 或 PostCSS 插件来将 PurgeCSS 与 Nuxt.js 一起使用。

Nuxt.js 插件

您可以使用名为 nuxt-purgecss在新窗口中打开 的社区模块，让 PurgeCSS 与 Nuxt 的使用尽可能简单。有了它合适的默认设置，您只需要对配置进行少量更改（或根本不需要更改）。

安装

  • 使用 yarn 或 npm 将 nuxt-purgecss 依赖项添加到您的项目
  • 将 nuxt-purgecss 添加到 nuxt.config.js 的 modules 部分
{
  buildModules: [ // if you are using nuxt < 2.9.0, use modules property instead.
    'nuxt-purgecss',
  ],

  purgeCSS: {
   // your settings here
  }
}

选项

默认值

在深入了解各个属性之前，以下是该模块的默认设置

{
  mode: MODES.webpack,
  enabled: ({ isDev, isClient }) => (!isDev && isClient), // or `false` when in dev/debug mode
  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 等非常方便，因为默认值非常合理。如果你不想包含默认值，只需使用函数即可。

深入了解属性

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

定义应在其中使用 PurgeCSS 的模式。

  • Webpack 模式只能与 build.extractCSS: true 一起使用
  • PostCSS 模式只能与 build.postcss 对象（无数组）或默认设置一起使用
启用
  • 类型：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 将在生产和开发模式下处于活动状态。

npm i -D @fullhuman/postcss-purgecss

yarn add @fullhuman/postcss-purgecss --dev

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