顺风清除PHP不呈现样式

Question

在一个新的WordPress项目中，我使用了带有ACF灵活(块)内容的尾风CSS。

现在我创建了一个“间隔”块，可以在其他块之间使用。

问题是，Tailwind没有正确地清除PHP文件。如果像"h-20“或"sm:h-40”这样的完整的刺，我的效果很好，但是当我用一些PHP过滤器创建字符串时，它就不能工作了。

例如：

<?php

$group = !empty(get_sub_field('spacer')) ? get_sub_field('spacer') : $args;

if (!empty($group['value'])) :
    
    $val = intval(str_replace('h-', '', $group['value'])); // input = h-28 , output = 28
    $val_half = 'h-' . round($val / 2);
    $val_third = 'sm:h-' . round($val / 3 * 2);
    $val_full = 'lg:h-' . $val;
    $spacing = $val_half . ' ' . $val_third . ' ' . $val_full; // output = h-14 sm:h-19 lg:h-28
    ?>

    <!-- Spacer -->
    <div class="spacer relative body-font w-full <?php echo $spacing; ?>"></div>  

<?php endif;

在上面的例子中，唯一可用的高度类是h-14。我想是因为这只鸽子不用断点吗？不确定。

我用Laravel来编译我的SASS和JS。

这是我的配置：

const mix = require('laravel-mix');
const local = require('./src/assets/js/utils/local-config');

const domain = 'fides.test';
const homedir = require('os').homedir();

require('laravel-mix-versionhash');
require('laravel-mix-tailwind');

mix.setPublicPath('./webroot/wp-content/themes/qore/dist');

mix.webpackConfig({
    externals: {
        "jquery": "jQuery",
    }
});

if (local.proxy) {
    mix.browserSync({
        watch: true,
        proxy: 'https://' + domain,
        host: domain,
        open: 'external',
        injectChanges: true,
        https: {
            key: homedir + "/.config/valet/Certificates/" + domain + ".key",
            cert: homedir + "/.config/valet/Certificates/" + domain + ".crt"
        },
        files: [
            './webroot/wp-content/themes/qore/**/*.{json,php,twig,blade.php}',
            './src/assets/**/*.{html,js,vue}',
        ],
        callbacks: {
            ready: function (err, bs) {
                console.log('callbacks');
                mix.sass('./src/assets/scss/style.scss', 'css');
            }
        }
    });
}

mix.tailwind();
mix.copy('./src/assets/fonts', './webroot/wp-content/themes/qore/dist/fonts');
mix.copy('./src/assets/img/', './webroot/wp-content/themes/qore/dist/img');
mix.copy('./src/assets/videos', './webroot/wp-content/themes/qore/dist/videos');
mix.js('./src/assets/js/vendor.js', 'js');
mix.js('./src/assets/js/script.js', 'js');
mix.sass('./src/assets/scss/style.scss', 'css');

if (mix.inProduction()) {
    // mix.versionHash();
    mix.sourceMaps();
}

我不知道该改变什么才能让这件事开始工作。我已经检查过：https://github.com/spatie/laravel-mix-purgecss，但这似乎完全被忽略了。

希望你们中有人知道该怎么做。

谢谢!

Answer 1

恐怕purgeCSS没有运行您的代码，也无法“看到”这些类。所以它没有将它们添加到CSS文件中。

根据“编写可净化的HTML”这里的尾风文档

这意味着必须避免在模板中使用字符串连接动态创建类字符串，否则PurgeCSS将不知道保留这些类。