Я пытаюсь удалить неиспользуемые правила 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')
],
})
Я бы хотел:
Мысли были бы очень признательны.
🤔 А знаете ли вы, что...
Laravel предоставляет возможность создания API с использованием Laravel Passport.
Возможно, вы могли бы попробовать 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
],
})
;