Purgecss无法识别条件类

问题描述

所以我使用Tailwind CSS作为我正在开发的可湿性粉剂主题。

我在创建生产级主题文件时遇到了一个问题，因为根据我对问题的理解，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');

business s-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类，这两个div都是使用配置文件创建的(而不是包含在基本顺风主题中)。这在开发中很好--因为顺风确实从配置文件创建了实用程序颜色类。但是由于某些原因，当它在生产中(即清除和缩小)时，它没有那些实用程序类--这些实用程序类只在模板部件中用作条件类(而不是在任何其他文件中)。

PurgeCSS

推荐答案在您的Html中寻找类的方式故意非常幼稚。它不会尝试解析您的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就不会删除它。

有关更多详细信息，请参阅文档：

• Writing purgeable HTML

这篇关于Purgecss无法识别条件类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！