特殊字符和 PurgeCSS 未按预期工作

Question

在非 Laravel 项目中使用 PurgeCSS 和 Laravel Mix。

一切正常，但我想在我的响应实用程序类中使用一些特殊的非 CSS 字符，但 PurgeCSS 正在剥离它们，即使它们存在于标记中。

我的示例类是：

<div class="u<sm:hidden"></div>

在css中是这样写的：

.u\<sm\:hidden {}

PurgeCSS 对冒号没有问题，因为下面的类可以正常工作：

.u-sm\:hidden {}

我有什么办法可以按预期完成这项工作？

谢谢

Answer 1

所以我遇到了同样的问题，我做了一些挖掘并在这里找到了解决方案 https://lancecore.com/building-our-sites/.

我解决它的方法是为 Purgecss 使用自定义提取器，并在该提取器中编写一个正则表达式，该表达式与 tailwindcss 中设计响应类的方式正确匹配。

现在，这是我的 postcss.config.js 文件，所有这些魔法都发生在这里：

const purgecss = require('@fullhuman/postcss-purgecss')

class TailwindExtractor {
    static extract(content) {
      return content.match(/[A-z0-9-:\/]+/g)
    }
}

module.exports = {
    plugins: [
        require('tailwindcss')('./tailwind.js'),
        require('autoprefixer'),
        purgecss({
            content: [
                './pages/**/*.vue',
                './layouts/**/*.vue',
                './components/**/*.vue'
        ],
        extractors: [{
            extractor: TailwindExtractor,
            extensions: ['vue']
        }
      ],
      whitelist: ['html', 'body']
    })
  ]
}