I have django project, but the question is about workflow or approach, rather than technical part
currently i have a structure like this:
src/
├── apps/
│ ├── authapp/
│ │ ├── templates/
│ │ │ └── authapp/
│ │ │ ├── login.html
│ │ │ └── signup.html
│ │ ├── views.py
│ │ └── *other files*
│ └── anotherapp/
│ ├── templates/
│ │ └── anotherapp/
│ │ └── another_page.html
│ ├── views.py
│ └── *other files*
├── project/
│ ├── settings.py
│ └── *other files*
├── static/
│ ├── scss/
│ │ ├── layout/
│ │ │ ├── _header.scss
│ │ │ └── _footer.scss
│ │ ├── components/
│ │ │ └── _buttons.scss
│ │ └── main.scss
│ └── js/
│ ├── auth.js
│ └── another.js
├── staticfiles/
│ └── *here must be bundled files*
└── templates/
└── base.html
According to django documentation and to common sense, it’s recommended to store static, which is specific for particular app – within the app itself. So, in my base.html i have common header and footer blocks that are shared across (almost) all apps. So, it turns out, in fact i have base.html with base.scss
So, i really am being confused how to deal with files properly, while following DRY principle, i mean that’s not a good idea to have multiple bundled css files (bundled with base.scss) and if each of them has the same code with header and footer and obviously it’s absoulutely crazy to have a single giant css across the whole site. Sometimes perhaps i don’t even need to have my base layouts (for example if my login page is completely standalone – it doesn’t have neither header nor footer) and actually the same goes for js files – i wouldn’t like to have a giant bundled.js in my login.html if my auth js logic just handles the single form (but maybee that’s ok to have it)
I hope i described that correctly, so generally i’m just looking for the best approach to deal with multiple assets files or the way i need to bundle them. It,s not a pet project, it’s a real one and it’s gonna be huge, therefore the question of clear and proper workflow is so important at this point.
I really was trying to find best practices similar to this issue, but they all are about the same thing – take WebPack, bundle everything into bundle.js and huge.scss attach them in and be happy. Ideally, i would like to have my apps as independent as possible with their own assets and bundle them with the bases ones. By the way – (If I understand everything correctly) by splitting my code i also solve an issue with caching – when editing something in particular scss, the other ones are not going to be touched – which is fine, but as i meantioned, each of my scss files has the the same imports from base.scss which is not DRY at all i guess