Not exactly sure how to phrase this, so bear with me.
I'm having url() relative path problems during the build of a scss file, while using a 3rd party theme (PrimeVue) together with my webpack setup. Each time I run the webpack build, it fails with
Error: Can't resolve '../../../framework/apollo-vue-3.0.1/public/assets/sass/images/landing/landing.jpg'
Other files also error out and there seems to be no way to fix the error, other than to modify the source theme library and change the relative paths.
These are my initial assumptions of the reasons for the error:
- Webpack wants the references in
url()calls to be relative to the entry scss file. - The 3rd party theme files are written such that the files containing the url() are written in relation a main source file in the library.
- For any custom file to override any sass variables, it must be in the same root as the original source scss file (
/myapp/frameworks/3rdpartytheme/custom/custom-styles.scss) in order for the relative paths to still work.
Here comes my problem. In order for us to easily be able to update this 3rd party dependency folder (not in node_modules btw), we need to put any customization of variables in a directory outside of the 3rd party folder, which would be completely overwritten on an update. So we place our .scss file in /myapp/assets/custom-styles.scss and this file then @import's the theme files. Works fine for the actual theme as long as there are no url() references.
I have also tried resolve-url-loader, but this is still not helping, as resolve-url-loader tries to adjust the base for the relative url to be relative to the source of the line of code. It seems what we need is in-between this and webpack assuming the root file is base.
Without rambling on, does this make sense, and any suggestions on where I should focus my reading to implement something to make this scenario work?