Angular中PostCSS配置PurgeCSS报错：t.test is not function求助

首先明确：很多开发者已经在用Angular的PostCSS配置特性，配合PurgeCSS清除Bootstrap这类框架中未被使用的CSS代码，以此优化打包体积。

你遇到的t.test is not a function报错，根源就是你推测的——JSON配置里的正则表达式没被正确解析。因为JSON只能存储字符串、数字等基础类型，没法直接定义正则对象，而PurgeCSS的safelist.standard/deep字段需要接收RegExp实例，你传的字符串被直接传入后，代码尝试调用字符串的test方法（只有正则对象才有这个方法），自然就报错了。

解决方法：改用JS格式的PostCSS配置文件 #

把你的postcss.config.json改成postcss.config.js，直接在配置里写正则表达式，示例如下：

module.exports = {
  plugins: {
    '@fullhuman/postcss-purgecss': {
      content: [
        'src/**/*.html'
      ],
      safelist: {
        standard: [
          /primary$/,
          /^mt-\d/,
          /btn$/,
          'invalid-feedback',
          'fade',
          'show',
          'collapsing',
          /anticon$/
        ],
        deep: [
          /^form-\w[a-z-]+/,
          /^modal-.*/,
          /^offcanvas-.*/,
          /^row-cols-.*/,
          /^btn-.*/,
          /^col-.*/,
          /^ant-.*/,
          /^nz-.*/,
          /^cdk-.*/
        ],
        greedy: [],
        keyframes: [],
        variables: []
      },
      skippedContentGlobs: []
    }
  }
}

注意点：

• 正则表达式直接用/xxx/语法定义，不需要转义反斜杠（比如JSON里的^mt-\\d改成JS里的/^mt-\d/）
• 不需要正则匹配的固定类名（比如invalid-feedback）可以直接保留字符串形式

改完配置后重新执行构建，报错应该就会消失，同时PurgeCSS会正确识别要保留的选择器，清除未使用的Bootstrap CSS代码。

内容的提问来源于stack exchange，提问作者George