当我尝试在 gridsome 项目中清除 css 时，Slick crausel css 正在破坏并从代码中删除 css 类

Question

我尝试使用 Purgecss 删除未使用的 CSS。我用过

“@fullhuman/postcss-purgecss”：“3.0.0”

并将 Node 18x 版本上的所有动态类列入白名单。 实现已完成，但在构建应用程序时，purgecss 删除了所有与 slick 相关的类，即使我已将所有类列入白名单。关于它为何损坏或如何修复有什么建议吗？

module.exports = {
    content: [
        './src/**/*.vue',
        './src/**/*.js',
        './src/**/*.jsx',
        './src/**/*.html',
        './src/**/*.pug',
        './src/**/*.md',
    ],
    whitelist: [
        'body',
        'html',
        'img',
        'a',
        'g-image',
        'g-image--lazy',
        'g-image--loaded',
        'p',
        'h1',
        'h2',
        'h3',
        'h4',
        'h5',
        'h6',
        'div',
        'header',
        'footer',
        'aside',
        'nav',
        'company-carousel',
        'slick',
        'slick-slide',
        'slick-list',
        'slick-slider',
        'slick-track',
        'slick-center',
        'slick-cloned',
        'slick-prev',
        'slick-arrow',
        'slick-initialized',
        'slick-active',
        'slick-current',

    ],
    extractors: [
        {
            extractor: content => content.match(/[A-z0-9-:\\/]+/g),
            extensions: ['vue', 'js', 'jsx', 'md', 'html', 'pug'],
            // Treat every word in the bundle as a CSS selector
      defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || []
        },
    ],
}

我希望删除与轮播相关的类，因为它们会破坏 UI。

Answer 1

到目前为止我有一些坏消息：

• Gridsome 死了
• PurgeCSS 已死
• slick-carousel 基于 jQuery 和权重 10.3kb + 29.4+kb 来自 jQuery，仅用于轮播
• Node.js当前的LTS是v20

好消息：

• 如果你想重建类似于 Gridsome 的东西，你可以使用 NuxtJS、Quasar 甚至 Vitesse，甚至 AstroJS 也可以以某种方式取代它
• Purge CSS仍然存在，即使现在我们倾向于不删除这些类，而是仅使用像TailwindCSS这样的CSS框架构建需要的类，因为我们意识到这是一些不必要的工作，并且可能会导致对于像你这样的问题
• 即使仍然可以使用

  slick-carousel

  ，请考虑一些替代方案，例如您可以在这里找到的那些，并非所有这些都很棒，但您至少有一些选择
• 如果您只需要从 v18 开始，升级 Node 版本可能不是最困难的过程