PurgeCSS

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-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 等會很方便，因為預設值相當合理。如果你不想要包含預設值，請使用函式即可。

屬性深入探討

模式
  • 類型：字串（webpack 或 postcss）
  • 預設值：webpack

定義 PurgeCSS 應使用的模式。

  • Webpack 模式只能搭配 build.extractCSS: true 使用
  • PostCSS 模式只能搭配 build.postcss 物件（非陣列）或預設設定使用
已啟用
  • 類型：布林值或 函式（僅適用於 webpack 模式，將接收 build.extend ctx）
  • 預設值：({ isDev, isClient }) => (!isDev && isClient)（僅在生產模式中啟用）或在偵錯/開發模式中為 false

啟用/停用模組

  • 如果評估為 false，模組將不會被啟用
  • 如果給定函式，它將在 webpack 模式中正確評估（在 postcss 模式中，它將被視為 true）
PurgeCSS 選項

請閱讀 PurgeCSS 文件在新視窗中開啟 以取得與 PurgeCSS 相關資訊。

我們使用 paths 來指定 PurgeCSS 應查看的路徑，而不是 content（說明 在此在新視窗中開啟。這適用於兩種模式，而不僅僅是 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']
}