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']
    })
  ]
}

特殊字符和PurgeCSS无法正常工作

1 个答案: