Unable to resolve relative paths in css using typescript in my project

[palmaone]

Hello everyone!

I've been trying to get my project to work using several technologies that need to be configured for the particular use case I'm working on, so I'm implementing unit tests for the front-end and also want to work in a 100% typescript environment, and I have so far succeeded in doing so, however I have some issues using typescript since I'm not that experienced using it along with Webpack +ts-loader. As an additional disclaimer I'm still learning to deeper understand how TSC and Webpack work behind the scenes so I can better understand how to troubleshoot my projects.

So where I'm stuck is that my app can't resolve relative urls when used in css, either inside files or inside vue files style sections.

For example:
background-image: url("/back-1.jpg");

or a style.css file I have in the src/assets/css folder that is referencing fonts in the public folder.

*Both of which work perfectly when not using the typescript, that is in my regular vue-cli-electron-builder project.

Also worth mentioning that I actually used the vue cli to create a fresh project using typescript out of the box but it has the same problem. Try using a css defind background image by passing a relative path to the url() function int the background-image property for example. I assumed at first that this was a typescript config issue and tryed to fix it by testing different cofigs both from .tsconfig.json and trying to add custom config to ts-loader by using the vue.config.js file and the webpack chanined config. But now I'm just clueless.

Have you tried or experienced something similar that can help with insights? Please do let me know if you have and suggestions or clues as to what am I missing. I will really appreciate it if you can help at least point me in the right direction.