3

我将 NuxtJS (VueJS) 与 TailwindCSS 和 PurgeCSS 一起使用。到目前为止，我一直在为 , 等颜色指定完整的 CSS 类text-green-800。bg-red-400但是在创建组件时它并不理想，虽然颜色可以作为 Prop 传递，但是bg-{color}-400在 PurgeCSS 删除未找到的背景颜色时也不能直接执行.

所以，我想把这些类放在 PurgeCSS 的 whitelistPatterns 中，允许正则表达式保护一些类。这是我设置的：

  purgeCSS: {
    whitelistPatterns: [/^bg-/, /^text-/, /^border-/]
  },

但是 PurgeCSS 完全忽略了配置。我尝试了很多正则表达式 : /bg-/, /bg/,/^bg-.*/等。没有一个有效。我认为它可能正在使用新版本的 PurgeCSS 来safelist代替，但是当我像这样设置 whitelistPatterns 时：

  purgeCSS: {
    whitelistPatterns: ['text-green-800', /^bg-/, /^text-/, /^border-/]
  },

然后text-green-800类被成功保护。所以我完全迷失了，似乎没有任何工作。而且显然只发生在生产中，因此很难调试。

我已经找到了这篇文章，它给出了我所做的事情： PurgeCSS whitelist patterns with TailwindCSS

如果有人有线索...谢谢！

4

1 回答 1

2

好的，我终于想通了！

首先，NuxtJS 在 2.3 版本中使用 purgeCSS，使用 whitelist（字符串数组）和 whitelistPatterns（正则表达式数组）。但是 TailwindCSS 也在应用 purgeCSS，但在 3.x 版本中...使用安全列表（字符串|正则表达式数组）

nuxt.config.js在文件中定义 purgeCSS 配置实际上是没有用的。文件中的一切都在发生（对于顺风类）tailwind.config.js。

误导的情况是，当您bg-blue-200在 NuxtJS purgeCSS 白名单中定义一个类（例如）时，TailwindCSS 不会清除该类。为什么？我不知道。TailwindCSS 似乎保留了 Nuxt 配置的白名单，但没有保留白名单模式......

所以，我的解决方案只是删除 purgeCSS 配置nuxt.config.js（如果您有特定的其他类要保护，请保留它），并tailwind.config.js像这样定义安全列表：

  purge: {
    content: [
      './components/**/*.{vue,js}',
      './layouts/**/*.vue',
      './pages/**/*.vue',
      './plugins/**/*.{js,ts}',
      './nuxt.config.{js,ts}'

    ],
    options: {
    // Whitelisting some classes to avoid purge
      safelist: [/^bg-/, /^text-/, /^border-/]
    }
  },

于 2021-04-15T09:07:16.383 回答