Уявіть собі таку ситуацію: ваш додаток виглядає ідеально на етапі розробки. Ви виконуєте команду npm run build, перевіряєте все, і все виглядає бездоганно. Але ось після виконання npm run postbuild частина CSS загадково зникає — і ваша UI ламається в продакшн-версії. 😱
Після витрачання цінного часу на відлагодження, я зрозумів, хто є головним винуватцем? PurgeCSS.
PurgeCSS агресивно видаляє невикористовувані стилі, щоб оптимізувати ваш CSS файл, але іноді воно заходить занадто далеко — особливо коли йдеться про складні селектори, такі як + (сусідній елемент), ~, або :nth-child(). Якщо ваші ретельно розроблені стилі зникають після postbuild, ймовірно, PurgeCSS їх видаляє.
На щастя, є легке рішення!
Просте рішення: використання коментарів для безпечного списку
Щоб гарантувати, що PurgeCSS не видалить важливі стилі, обгорніть їх у спеціальні коментарі:
/*! purgecss start ignore */
.step-wrap:first-of-type.wrap-passed + .step-wrap.wrap-current {
& > div > span {
left: -50% !important;
border-color: yellow;
}
}
/*! purgecss end ignore */
✅ Це змушує PurgeCSS зберігати стилі, гарантуючи, що вони не зникнуть після postbuild.
✅ Це швидко, просто і не вимагає змін в конфігурації.
Ви можете ознайомитись із додатковими способами уникнення видалення CSS за допомогою посилання https://purgecss.com/safelisting.html.
Останні думки:
PurgeCSS чудово підходить для оптимізації CSS, але якщо ваш сусідній елемент (+) або інші складні селектори зникають після postbuild, саме час взяти під контроль ситуацію. Безпечний список на основі коментарів — це найшвидше та найпростіше рішення, а безпечний список у postcss.config.js пропонує більше можливостей для налаштування.
Ви стикалися з подібною проблемою? Що найкраще допомогло вам? Поділіться в коментарях!
Перекладено з: CSS Is Not Working in Production? PurgeCSS Might Be the Culprit!