如何停止吹扫顺风组件

Posted 2023-03-07

【中文标题】如何停止吹扫顺风组件

【英文标题】：How to stop purging tailwind components

【发布时间】：2020-03-06 12:12:39

【问题描述】：

我正在使用 TailwindCSS 和 Laravel Mix。我正在尝试设置 PurgeCSS，我已经让它读取我的模板文件（使用 WordPress）并清除模板文件中没有的任何 CSS。

但是，作为 Tailwind 的一部分，我在我的 scss 文件中使用 @apply，并且我正在应用的那些实用程序也被清除，这使我的网站无法正常运行。

我的 sass 文件在 css/dev 中，有一个 app.scss，然后是包含更多文件的目录（base、utilities、custom、components）。

我的webpack.mix.js文件配置如下：

mix.scripts(['js/dev/app.js', 'js/dev/navigation.js', 'js/dev/skip-link-focus-fix.js'],
    'js/build/app.js')
    .sass('css/dev/app.scss', 'css/build')
    .options(
        processCssUrls: false,
        postCss: [tailwindcss('./tailwind.config.js')],
    )
    .purgeCss(
        enabled: mix.inProduction(),
        // Your custom globs are merged with the default globs. If you need to
        // fully replace the globs, use the underlying `paths` option instead.
        globs: [
            path.join(__dirname, 'template-parts/*.php'),
            path.join(__dirname, '*.php'),
            path.join(__dirname, 'css/dev/*.scss'),
            path.join(__dirname, 'css/dev/**/*.scss'),
        ],
        extensions: ['html', 'js', 'php', 'scss', 'css'],
    );

如您所见，我尝试设置 purgeCss 的路径以查看 css 路径内部，但没有奏效。

有谁知道如何做到这一点？

【参考方案1】：

您正在将您的 scss 编译为 css，在 Purge 运行之前，因此不需要只清除您的 .scss 文件，只需要您的 main.css（或任何输出调用）。

您编译的类名是否确实存在于您的模板文件中完整？如果它们与模板中的类不是 100% 匹配，那么它们将完全正确地被清除。

【参考方案2】：

问题在于 WordPress 类未包含在模板文件中，然后被清除。解决方案是切换到使用 UnCSS，它允许我设置 URL 以供 UnCSS 访问，并且它不会清除这些页面上使用的任何类。我还包括了一些标准的 WordPress 课程，我在网上找到了这些课程。

我的最终配置是：

const uncss = require('postcss-uncss');

mix.js('js/dev/app.js', 'js/build/app.js')
    .sass('css/dev/app.scss', 'css/build')
    .options(
        processCssUrls: false,
        postCss: [
            tailwindcss('./tailwind.config.js'),
            ...process.env.NODE_ENV === 'production' ? [uncss(
                html: [
                    './*.php',
                    './template-parts/*.php',
                    'https://www.example.com',
                    'https://www.example.com/work/',
                    'https://www.example.com/work/example-project/',
                    'https://www.example.com/contact/',
                    'https://www.example.com/blog/',
                    'https://www.example.com/blog/laravel-php-framework/',
                ],
                ignore: [
                    '.rtl',
                    '.home',
                    '.blog',
                    '.archive',
                    '.date',
                    '.error404',
                    '.logged-in',
                    '.admin-bar',
                    '.no-customize-support',
                    '.custom-background',
                    '.wp-custom-logo',
                    '.alignnone',
                    '.alignright',
                    '.alignleft',
                    '.wp-caption',
                    '.wp-caption-text',
                    '.screen-reader-text',
                    '.comment-list',
                    '.grecaptcha-badge',
                    /^search(-.*)?$/,
                    /^(.*)-template(-.*)?$/,
                    /^(.*)?-?single(-.*)?$/,
                    /^postid-(.*)?$/,
                    /^attachmentid-(.*)?$/,
                    /^attachment(-.*)?$/,
                    /^page(-.*)?$/,
                    /^(post-type-)?archive(-.*)?$/,
                    /^author(-.*)?$/,
                    /^category(-.*)?$/,
                    /^tag(-.*)?$/,
                    /^tax-(.*)?$/,
                    /^term-(.*)?$/,
                    /^(.*)?-?paged(-.*)?$/,
                    '.animate',
                    '.animated',
                    '.bounce',
                    '.fadeInDown',
                    '.fadeIn',
                    '.fadeInUp',
                    '.jackInTheBox',
                ]
            )] : [],
        ]
    );

我还使用了 UnCSS exclude from purge CSS cmets：

/* uncss:ignore start */

my css goes here

/* uncss:ignore end */

我最终在我的所有自定义 sass 文件上使用了这个，除了 tailwind 文件，因此唯一被清除的选择器是 tailwind 实用程序，这为我节省了大约 300 KB。

【讨论】：

‘……问题在于模板文件中没有包含 WordPress 类……’是的，正如我在回答中所写的那样。您可以将模板中没有的类添加到 purgeCss 白名单中；这正是它的用途。

@Seth Warburton 考虑到使用白名单的 WordPress 类的数量不太可能保存所需的所有内容。使用 UnCSS 可以抓取 URL，还可以选择忽略注释。您在这个问题上是对的，我的回答提供了一种有效的解决方法。

PurgeCSS 也会读取您的模板路径，在这方面没有区别。