javascript - 如何停止清除顺风组件

Question

我正在使用 TailwindCSS 和 Laravel Mix。我正在尝试设置 PurgeCSS，我已经让它读取我的模板文件(使用 WordPress)并清除模板文件中不存在的所有 CSS。

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

我的 sass 文件在 css/dev 中，有一个 app.scss 然后是包含更多文件的目录(base， 实用程序、自定义、组件)。

我的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，因此无需清除您的 .scss 文件，仅清除您的 main.css(或调用的任何输出)。

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