I have a question regarding how to resolve the following issue:
In my sass files, I utilize absolute path variables in my main include files. For example, fonts are stored in /assets/fonts/... and icons are located in /assets/icons/... These paths only work when the domain is at the root level.
The environment where I want my application to be deployed has a different folder structure that goes several levels deep.
Here is an illustration of the file structure in my current development environment:
/root
assets
icons
...
home
home.scss
page1
module
module.scss
And here is an example of the file structure in the new environment:
/root
various
subfolders
assets
icons
...
css
home
home.css
page1
module
module.css
As shown above: The compiled CSS now resides in subfolders that can be quite deep, around 8 levels down. The original root declaration in my css will not function correctly due to this new tree structure.
My potential solutions are as follows:
- Adjust my sass so that all paths are relative (not preferred as it would complicate my sass code unnecessarily)
- Modify my .htaccess file to accommodate for this change (also not ideal as I would need to make adjustments every time I switch environments)
- Create/use a gulp task that automatically updates my compiled css files by adding relative paths to all occurrences of
url("/assets
I have researched extensively, delving into tools like thread2, gulp-tap, and gulp-replace. However, I haven't been able to find a perfect solution yet. For example, the straightforward approach using gulp-replace doesn't meet my requirements since I need access to information about the file currently being processed in order to determine how many directories up it needs to go before reaching the assets folder.
Has anyone encountered this issue before? Any suggestions on how to tackle this problem?