Question

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

研究使我认为postcss-uncss是删除不使用的CSS的最佳选择，如果您不使用服务器端渲染（请参阅：https://www.purgecss.com/comparison）

现在，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')
        ],
    })

我要：

告诉它使用哪个laravel路线（或者也可以使用“全部”）
我的sass / scss文件所在的位置：/ resources / sass / *（示例文件：/resources/sass/app.scss、/resources/sass/admin/admin.scss等）
将输出放在哪里，即没有未使用规则的已编译（和清理）的css：/ public / css / *（以便保留相同的结构，例如：/public/app.css、/public/ admin / admin.css等）

将不胜感激。

Answer 1

也许您可以尝试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 });

Answer 2

这就是我最终要做的（根据我与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
        ],
    })
   ;

为Laravel Mix配置postcss-uncss

2 个答案: