Unable to resolve path of image that is defined in a global variable

I have a centralized variables file src\assets\sass\core\components\_variables.scss, It defines scss variables

$login-main-bg-img: "assets/media/misc/landscape.png";
$login-main-bg-img-dark: "assets/media/misc/landscape_dark.jpg";

// Rest of the code


An-other file for theming src\assets\sass\core\components\_root.scss, It defines css variables for light/dark mode

[data-theme=light] {
--login-main-bg-img: url(#{$login-main-bg-img});
}

[data-theme=dark] {
--login-main-bg-img: url(#{$login-main-bg-img-dark});
}


While in my src\app\ui\user-management\login\login.component.scss, I use this for setting background image.

.bg_img {
background-image: var(--login-main-bg-img);
}


One data-theme attribute variable set can exist.

<html lang="en" data-theme="light">...</html>


While on execution the angular app throws Error

Compiled with problems:

ERROR in ./src/styles.scss (./src/styles.scss.webpack[javascript/auto]!=!./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[6].rules[1].use[0]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[6].rules[1].use[1]!./src/styles.scss)

Module Error (from ./node_modules/postcss-loader/dist/cjs.js):
E:\MyApp\MyApp.Presentation\angular-app\src\assets\sass\core\components\_root.scss:443:4: Can't resolve './assets/sass/core/components/assets/media/misc/landscape.png' in 'E:\MyApp\MyApp.Presentation\angular-app\src'


I tried with ~/src/assets/... and /assets/... but no luck.

Continue reading...