Razzle

此範例說明如何使用 create-razzle-app 範本設定 PurgeCSS。

安裝

1. 安裝套件

使用 npx create-razzle-app my-app 初始化專案後，安裝 PurgeCSS 外掛

npm i --save-dev razzle-plugin-purgecss

yarn add --dev razzle-plugin-purgecss

2. 編輯 razzle.config.js

// razzle.config.js
const path = require('path');

module.exports = {
  plugins: [
    {
      name: 'purgecss',
      options: {
        // This path options is required for PurgeCSS to analyzed all of yours content
        path: path.resolve(__dirname, 'src/**/*'),
      }
    }
  ],
};

選項

• only

  您可以使用 only 選項指定 PurgeCSS 的進入點

  // razzle.config.js
  const path = require('path');
  
  module.exports = {
    plugins: [
      {
        name: 'purgecss',
        options: {
          path: path.resolve(__dirname, 'src/**/*'),
          only: ['bundle', 'vendor'],
        }
      }
    ],
  };
  

• whitelist (預設值：[])

  您可以將選取器 whitelist，以阻止 PurgeCSS 從 CSS 中移除它們。這可以使用 whitelist 和 whitelistPatterns 選項達成。

  // razzle.config.js
  const path = require('path');
  
  module.exports = {
    plugins: [
      {
        name: 'purgecss',
        options: {
          path: path.resolve(__dirname, 'src/**/*'),
          whitelist: ['random', 'yep', 'button'],
        }
      }
    ],
  };
  

• whitelistPatterns (預設值：[])

  您可以根據正規表示法使用 whitelistPatterns 將選取器加入白名單。

  // razzle.config.js
  const path = require('path');
  
  module.exports = {
    plugins: [
      {
        name: 'purgecss',
        options: {
          path: path.resolve(__dirname, 'src/**/*'),
          whitelistPatterns: [/red$/],
        }
      }
    ],
  };
  

• keyframes (預設值：false)

  如果您使用 CSS 動畫函式庫（例如 animate.css），您可以透過將 keyframes 選項設定為 true，移除未使用的關鍵影格。

  // razzle.config.js
  const path = require('path');
  
  module.exports = {
    plugins: [
      {
        name: 'purgecss',
        options: {
          path: path.resolve(__dirname, 'src/**/*'),
          keyframes: true
        }
      }
    ],
  };
  

• fontFace (預設值：false)

  如果 CSS 中有任何未使用的 @font-face 規則，您可以透過將 fontFace 選項設定為 true，移除它們

  // razzle.config.js
  const path = require('path');
  
  module.exports = {
    plugins: [
      {
        name: 'purgecss',
        options: {
          path: path.resolve(__dirname, 'src/**/*'),
          fontFace: true,
        }
      }
    ],
  };
  

• rejected (預設值：false)

  有時瀏覽移除清單會更實用，以查看是否有明顯錯誤。如果您想這麼做，請使用 rejected 選項。

  // razzle.config.js
  const path = require('path');
  
  module.exports = {
    plugins: [
      {
        name: 'purgecss',
        options: {
          path: path.resolve(__dirname, 'src/**/*'),
          rejected: true,
        }
      }
    ],
  };