With Jinja2, I can normally link to a CSS stylesheet from HTML template with something like:
<link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}" />
given that "static" is the relative directory containing the styles.css.
My problem is, while I am working on my web application, I am concurrently working on a SCSS/SASS project that resides in another project folder. I want my web application to link to the generated CSS file in the SCSS/SASS project folder.
But for every update/build in the SCSS/SASS project, I don't want to manually copy the generated CSS file over to the script folder of the web application project.
What would be the best set up and practice to achieve this? Any additional concerns when building/packing my web application for project?
For the context, I am using VSCode with the "Live Sass Compiler" extension for auto-building my CSS file. For production, I am planning to containerise the web application with gunicorn and Docker.
Some of my concerns:
- I understand that I can do the file copying in the dockerfile, but I am hoping to have a solution that works for both development and production.
- The SCSS/SASS project is hosted with Git, but the generated CSS files may not be pushed to the remote repo. When there are future colleagues joining to either project (by collaborating on git), the ideal scenario would be that
- people working on SCSS/SASS doesn't need to know anything about the web application project
- people working on the web application do not need to worry too much about the fiddling of the SCSS/SASS project. They may have cloned the SCSS/SASS repo to their local as this project is a dependency of the web application project, but they may or may not modify anything in the SCSS project.
- Although the question here is about Jinja linking to a auto-generated CSS file, I wish the resolution could be project-agnostic where possible, meaning that if I apply the same solution to linking things such as a separate JavaScript library project, a font project, or other web resource projects, I would hope they work the same way.
Thank you all in advance.
