Как удалить неиспользуемый CSS при использовании Django, Sass и фронтенд-фреймворка?

Я использую основанный на SCSS фреймворк для фронтенда (а именно cirrus-ui) в своем проекте Django. Для компиляции таблицы стилей CSS с помощью Sass я использую webpack для компиляции статических файлов (в настоящее время только таблицы стилей CSS, но я уверен, что со временем туда попадет и JavaScript). В проекте Python я использую django-webpack-loader.

Моя скомпилированная, минифицированная таблица стилей CSS занимает внушительные 265 КиБ. Это не идеально.

Я знаю о PurgeCSS и uncss. Хотя я не использовал их раньше, я думаю, что понимаю, как вызвать их из webpack.config.js. Чего я не знаю, так это как использовать их или что-то подобное с Django и его шаблонами.

Примечания:

Я использую Yarn для управления пакетами.

main.scss (пример выдержки).

@use "cirrus-ui/src/cirrus-all" as *;

Я действительно предоставляю пользовательскую карту конфигурации, но я не понимаю, как это относится к вопросу.

Соответствующие детали конфигурации Django (settings.py)

WEBPACK_LOADER = {
    'DEFAULT': {
        'CACHE': not DEBUG,
        'STATS_FILE': BASE_DIR / 'frontend/webpack-stats.json',
        'POLL_INTERVAL': 0.1,
        'IGNORE': [r'.*\.hot-update.js', r'.*\.map'],
    }
}
STATICFILES_DIRS = [
    './frontend/static',
]

Макет проекта

PROJECT ROOT/
 - djangoproject/
   - settings.py
 - templates (TEMP)/
 - manage.py
 - frontend/
   - .yarn/
   - static/
     - (Compiled Static Files Here)
   - assets/scss/main.css
   - webpack.config.js
   - webpack-stats.json
   - package.json

Django 4.0.2

Вернуться на верх