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.

Solution

I was having the issue due to providing a relative path in the src\assets\sass\core\components\_variables.scss file, but SCSS treats it as just a string.

However, in the src\assets\sass\core\components\_root.scss file, SCSS interpreted the path correctly due to the following declaration: --login-main-bg-img: url(#{$login-main-bg-img});. The problem arose because the relative file paths for _variables.scss and _root.scss were different. A relative path that worked in _variables.scss didn't work in _root.scss unless both files were in the same directory, which wasn’t the case in my project.

I resolved the issue by making the following change, which adjusted the relative path accordingly:

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