锐客网

  1. 首页 > 睿知 > it技术 > >

purgecss无法识别条件类

IT知识问答WordPress网站开发WordPress主题修复错误tailwind-css

因此, 我将TailwindCSS用于正在开发的WP主题。
我在创建生产级主题文件时遇到了一个问题, 因为从我对问题的理解来看, purgecss无法识别模板零件上使用的条件类。例如, 假设我创建了一个名为” business-card.php” 的模板部件, 在其中向它传递了一个变量类型(使用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>

【purgecss无法识别条件类】因此, 将有两个div, 一个将具有text-color-A类, 另一个将具有text-color-B, 两者都是使用配置文件创建的(而不是包含在基本的windwind主题中)。这在开发中很好-因为tailwind实际上是从config文件创建实用程序颜色类的。但是由于某种原因, 在生产中(即清除和缩小)时, 它没有那些实用程序类-仅在模板部分中用作条件类(而在其他任何文件中都没有使用)。
#1你可以使用PurgeCSS白名单选项添加这些类。
const purgecss = new Purgecss({ //... Your config whitelist: ['text-color-A', 'text-color-B', 'etc'] })

或白名单模式(正则表达式匹配)
whitelistPatterns: [/^text-color/], // All classes starting with text-color

你可以在这里找到更多信息
#2直接从顺风文档中获取：
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就不会将其删除。

    推荐阅读


    上一篇：如何从WordPress博客文章页面删除评论和作者图标

    下一篇：产品ID在WC_Order中返回空-WooComerce