Question

我正在使用TailwindCSS和Laravel Mix。我正在尝试设置PurgeCSS，并且已经读取了我的模板文件（使用WordPress）并清除了不在模板文件中的所有CSS。

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

我的sass文件位于css/dev中，其中有一个app.scss，然后是其中包含更多文件的目录（base，utilities，custom，{ {1}}。

我的components文件配置如下：

webpack.mix.js

如您所见，我尝试设置purgeCss的路径以查看css路径内的内容，但这没有用。

有人知道如何实现这一目标吗？

Answer 1

您要在清除运行之前将scss编译为css ，因此不必只清除main.css（或任何称为输出的内容）中的.scss文件。

您的已编译类名称实际上在模板文件中完全存在吗？如果它们与模板中的类不是100％匹配，则将非常正确地清除它们。

Answer 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',
                ]
            })] : [],
        ]
    });

我还利用了从清除CSS注释中排除的UnCSS：

/* uncss:ignore start */

my css goes here

/* uncss:ignore end */

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

如何停止清除顺风组件

2 个答案: