purgecss不能识别条件类
所以我使用TailwindCSS作为我正在开发的WP主题。
我在创建产品级主题文件时遇到了一个问题，因为根据我对问题的理解，purgecss无法识别模板部件上使用的条件类。例如，假设我创建了一个名为"business-card.php“的模板部分，其中传递了一个变量type (使用set_query_var / get_query_var)：
page-about.php
set_query_var('type', 'A');
get_template_part('template-parts/content/business', 'card');
set_query_var('type', 'B');
get_template_part('template-parts/content/business', 'card');businesss-card.php
$type = get_query_var('type')
<div class="<?php echo type == 'A' ? 'text-color-A' : 'text-color-B' ?>">
--- insert some content here ---
</div>因此将有两个div，一个是text-color-A类，另一个是text-color-B，它们都是使用配置文件创建的(而不是包含在基本的顺风主题中)。这在开发中很好--因为顺风实际上是从配置文件中创建实用程序颜色类的。但出于某种原因，当它在生产中(即清除和缩小)时，它没有那些实用程序类--它们只作为条件类在模板部分中使用(而不是在任何其他文件中)。
回答 5
Stack Overflow用户
发布于 2020-04-30 23:32:08
PurgeCSS在查找类的方式上有意地非常天真。它不尝试解析HTML并查找类属性或动态执行JavaScript -它只是在整个文件中查找与此正则表达式匹配的任何字符串：
/[^<>"'`\s]*[^<>"'`\s:]/g这意味着必须避免在模板中使用字符串连接动态创建类字符串，否则PurgeCSS将不知道保留这些类。
因此，不要使用字符串连接来创建类名：
<div :class="text-{{ error ? 'red' : 'green' }}-600"></div>相反，动态地选择一个完整的类名：
<div :class="{{ error ? 'text-red-600' : 'text-green-600' }}"></div>只要类名完整地出现在模板中，PurgeCSS就不会删除它。
有关详细信息，请参阅文档：
Stack Overflow用户
发布于 2021-02-19 09:52:40
如果您使用的是Tailwind 2.0+，您可以配置被purge CSS直接在tailwind.config.js文件中忽略的白名单类。
下面是我自己代码的一个示例，其中我将类text-ingido-400白名单
// tailwind.config.js
module.exports = {
purge: {
content: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
options: {
safelist: ['text-indigo-400']
}
} ,
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}有关更多信息，您可以查看位于：https://tailwindcss.com/docs/optimizing-for-production的相关文档。
Stack Overflow用户
发布于 2020-04-20 00:37:21
您可以使用PurgeCSS白名单选项添加这些类。
const purgecss = new Purgecss({
//... Your config
whitelist: ['text-color-A', 'text-color-B', 'etc']
})或whitelistPatterns (Regex匹配)
whitelistPatterns: [/^text-color/], // All classes starting with text-color您可以找到更多的信息，这里
https://stackoverflow.com/questions/61312762
复制相似问题
腾讯云开发者
