如何停止吹扫顺风组件

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。