Razzle

本示例展示如何在 create-razzle-app 模板中设置 PurgeCSS。

安装

1. 安装包

使用 npx create-razzle-app my-app 初始化项目后，安装 PurgeCSS 插件：

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

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

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

yarn add --dev razzle-plugin-purgecss

::: ::::

2. 编辑 razzle.config.js

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

module.exports = {
  plugins: [
    {
      name: 'purgecss',
      options: {
        // 此路径选项对于 PurgeCSS 分析所有内容是必需的
        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（默认：[]）

  你可以将选择器列入白名单，以阻止 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,
        }
      }
    ],
  };