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（默认值：[]）

  你可以白名单选择器，以阻止 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（默认值：[]）

  你可以根据正则表达式将选择器列入白名单。

  // 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,
        }
      }
    ],
  };