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

Posted

技术标签:

【中文标题】自定义提取器不适用于 Nuxt PurgeCSS【英文标题】:Custom extractor not working with 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) || []

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

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

我在这里做错了什么?

【问题讨论】:

【参考方案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的主要内容,如果未能解决你的问题,请参考以下文章

jQuery 属性等于选择器不适用于自定义属性

自定义 WebDAV 服务器不适用于 Windows 7 微型重定向器

带有选择器的 SwiftUI 列表:选择不适用于自定义类型(macOS)

Nuxt.js 自定义加载器不会立即加载

Flink Twitter Streaming示例不适用于自定义端点

prepareForSegue 不适用于自定义 segue (swift)