Question

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

该项目正在使用类似于Tailwind（基于实用程序）的我自己的CSS，并且我有一些使用@符号的类。

此软件包的默认正则表达式为：

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) || []

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

这使我相信我没有正确覆盖默认提取程序。

我在这里做错什么了吗？

Answer 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

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

1 个答案: