How to use SCSS absolute import path in a React, Webpack, Typescript Project?

Question

I have been trying to import SCSS files with an absolute path for 2 days now...

My folder structure:

src
|--assets
|--|--styles
|--|--|--_variables.scss
|--UI
|--|--Layout.module.scss

I would like to import variables and functions from _variables.scss to Layout.module.scss using an absolute path to avoid my code from breaking when changing the folder structure.

I am using the live sass compiler extension in VS code which trows the error

Error: Can't find stylesheet to import.

when I try to import a scss file using an absolute path like @import 'src/assets/styles/variables' .

Relative paths work just fine

I tried several things:

1. Using the sass-loader includePaths option and including the src folder

2. Using the webpack module.resolve object in the config file to add the src folder to the folder that will be searched when trying to import modules and then using the ~assets/styles/variables path

3. Using webpack module.alias object in the webpack config file to define an alias for the src folder and then use it like so Styles/variables

I looked up a lot of similar problems but neither of the solutions would help solve my problem. I would appreciate any possible solution!