如何停止吹扫顺风组件

Question

我正在使用 TailwindCSS 和 Laravel Mix。我正在尝试设置 PurgeCSS，我让它读取了我的模板文件（使用 WordPress）并清除了模板文件之外的所有 CSS。

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

我的 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

在Purge 运行之前，您正在将 scss 编译为 css ，因此不需要只清除 main.css（或任何调用的输出）的 .scss 文件。你编译的类名是否完整地存在于你的模板文件中？如果它们与模板中的类不是 100% 匹配，那么它们将非常正确地被清除。

Answer 2

问题在于 WordPress 类没有包含在模板文件中，然后被清除。解决方案是切换到使用 UnCSS，这允许我设置 URLS 以供 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 注释：/* uncss:ignore start */my css goes here/* uncss:ignore end */我最终在我所有的自定义 sass 文件上使用了这个，除了 tailwind 文件，这样唯一被清除的选择器是 tailwind 实用程序，这为我节省了大约 300 KB。