为 Laravel Mix 配置 postcss-uncss

Configuring postcss-uncss for Laravel Mix

我正在尝试从我的一个或多个 sass 文件中删除未使用的 css 规则。

研究让我想到 postcss-uncss 作为删除未使用 css 的最佳选择,如果您不使用服务器端呈现(请参阅: https://www.purgecss.com/comparison)

https://github.com/uncss/postcss-uncss

现在,postcss-uncss 是 uncss 的包装器:https://github.com/uncss/uncss 但是,uncss 文档让我感到困惑,这里的示例配置没有用:https://github.com/uncss/postcss-uncss#example-configuration

如何为 Laravel Mix 配置 postcss-uncss?

这是我目前所拥有的:

mix.js('resources/js/app.js', 'public/js')
    .options({
        processCssUrls: false,
        postCss: [
            require('postcss-uncss'),
            tailwindcss('./tailwind.config.js')
        ],
    })

我想:

  1. 告诉它使用哪个 laravel 路由(或者 'all' 也应该没问题)
  2. 我的 sass / scss 文件所在的位置:/resources/sass/*(示例文件:/resources/sass/app.scss、/resources/sass/admin/admin.scss, 等等)
  3. 在哪里放置输出,即没有未使用规则的编译(和清理)css:/public/css/*(以便保留相同的结构,例如:/public/app.css, /public/admin/admin.css, 等)

不胜感激。

也许你可以试试 Spatie package?

让我们安装它。

npm i laravel-mix-purgecss

在您的 webpack.mix.js.

中调用 purgeCss()
mix.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css')
   .purgeCss({ enabled: true });

这就是我最终所做的(根据我与 Adam Wathan 的对话,事实证明,使用的 purgecss 是比 uncss 更好的选择

let mix = require('laravel-mix');

const tailwindcss = require('tailwindcss');

// Removes unused CSS
// According to Discord chat: Running Purge CSS as part of Post CSS is a ton faster than laravel-mix-purgecss
// But if that doesn't work use https://github.com/spatie/laravel-mix-purgecss
const purgecss = require('@fullhuman/postcss-purgecss')({
  // Specify the paths to all of the template files in your project 
  content: [
    './resources/views/*.php',
    './resources/views/**/*.php',
    './resources/js/components/*.vue',
    './resources/js/components/**/*.vue',
  ],

  // Include any special characters you're using in this regular expression
  defaultExtractor: content => content.match(/[A-Za-z0-9-_:/]+/g) || []
});

mix.options({
        clearConsole: true, // in watch mode, clears console after every build
        processCssUrls: false,
        postCss: [
            //require('tailwindcss'),
            tailwindcss('./tailwind.config.js'),

            // to enable purgecss on production only
            ...process.env.NODE_ENV === 'production' ? [purgecss] : []

            // to enable on all environments, local and production
            //purgecss
        ],
    })
   ;