如何停止清除顺风组件

Question

我正在使用 TailwindCSS 和 Laravel 混合。我正在尝试设置 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 路径内部，但没有奏效。

有人知道如何实现吗？

Answer 1

您正在编译 scss 到 css before Purge 运行，所以应该没有必要清除您的 .scss 仅归档您的 main.css（或输出的任何名称）。

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

Answer 2

问题出在 WordPress 类未包含在模板文件中然后被清除。解决方案是切换到使用 UnCSS，这允许我为 UnCSS 设置 URL 以进行访问，并且它不会清除那些页面上使用的任何类。我还包括一些标准的 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 评论：

/* uncss:ignore start */

my css goes here

/* uncss:ignore end */

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

如何停止清除顺风组件

How to stop purging tailwind components

javascript

css

webpack

postcss

tailwind-css