'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 |
---|