'How do I remove unused CSS when using Django, Sass and a frontend framework?

I am using a SCSS-based frontend framework (namely cirrus-ui) with my Django project. For compiling the CSS stylesheet with Sass, I use webpack to compile the static files (Presently only CSS stylesheets but I'm sure some JavaScript will probably work its way in there eventually). In the Python project, I use django-webpack-loader.

My compiled, minified CSS stylesheet is a whopping 265 KiB. This is not ideal.

I know about PurgeCSS and uncss. While I have not used them before, I think I understand how to call these from the webpack.config.js. What I don't know is how to utilize these or something similar with Django and its templates.

Notes:

I use Yarn to manage packages.

main.scss (example excerpt).

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

I actually do provide a custom configuration map, but I don't see how that's relevant to the question.

Relevant Django Configuration Details (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 layout

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



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source