Настройка postcss-uncss для Laravel Mix

Я пытаюсь удалить неиспользуемые правила css из одного или нескольких моих файлов sass.

Исследования привели меня к 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#пример-конфигурации

Как настроить postcss-uncss для Laravel Mix?

Это то, что у меня есть до сих пор:

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

Я бы хотел:

  1. Скажите, какие маршруты laravel использовать (или «все» также должны быть в порядке)
  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 и т. д.)

Мысли были бы очень признательны.

🤔 А знаете ли вы, что...
Laravel предоставляет возможность создания API с использованием Laravel Passport.


3
879
2

Ответы:

Возможно, вы могли бы попробовать Spatie упаковка?

Давайте установим его.

npm i laravel-mix-purgecss

Вызовите purgeCss() в вашем файле webpack.mix.js.

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

Решено

Вот что я в итоге сделал (использовал 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
        ],
    })
   ;