自定义提取器不适用于 Nuxt PurgeCSS答案

【问题标题】：Custom extractor not working with Nuxt PurgeCSS自定义提取器不适用于 Nuxt PurgeCSS
【发布时间】：2019-12-14 03:31:39
【问题描述】：

我正在使用 Nuxt.js 并使用 Nuxt-PurgeCSS：https://github.com/Developmint/nuxt-purgecss

这个项目使用我自己的 CSS，类似于 Tailwind（基于实用程序），我有一些使用 @ 符号的类。

这个包的默认正则表达式是：

return content.match(/[A-z0-9-:\\/]+/g)

具有以下类：

u:w-1/12 u@sm:w-12/12

它正确地清除了第二个，因为它与提取器的正则表达式不匹配。

我想通过将 Nuxt 配置中的 purgeCSS 配置更新为以下内容：

purgeCSS: {
    extractors: [
        {
            extractor: class {
                static extract(content) {
                    return content.match(/[@A-Za-z0-9-:/]+/g) || []
                }
            },
            extensions: ['html', 'vue', 'js']
         }
    ]
}

这个新的提取器包含 @ 符号，但仍然使用 @ 符号清除类名。我尝试了以下正则表达式：

return content.match(/[A-Z]+/g) || []

查看它是否正确剥离了所有内容（作为测试），但它仍然保留第一类并清除第二类，即使它不应该匹配任何内容。

这让我相信我没有正确覆盖默认提取器。

我在这里做错了什么？

【问题讨论】：

标签： nuxt.js purge css-purge

【解决方案1】：

您可以为每个扩展程序使用一个提取器。
然后，您必须覆盖默认设置。

purgeCSS: {
    extractors: () => [
        {
            extractor: class {
                static extract(content) {
                    return (content.match(/[A-z0-9-:\\/]+/g || []).concat(content.match(/[@A-Za-z0-9-:/]+/g) || [])
                }
            },
            extensions: ['html', 'vue', 'js']
         }
    ]
}

https://github.com/Developmint/nuxt-purgecss/issues/52

【讨论】：

你不知道我找了多久！谢谢