Angular won't recognise absolute paths aliases in tsconfig.json

Question

I try to use the shorthands via tsconfig.json paths, but it always run into errors while compiling. I show some of my code below.

Further I wonder if it's possible to use the shorthand somehow like this in html:

<img src="@icons/basic/expand-arrow.svg">

Or is there any similar possibility for that?

Code from app

tsconfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@icons/*": ["src/assets/icons/*"],
      "@styles/*": ["src/assets/styles/*"]
    },
    "outDir": "./dist/out-tsc",
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "noImplicitOverride": true,
    "noPropertyAccessFromIndexSignature": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es2017",
    "module": "es2020",
    "lib": [
      "es2020",
      "dom"
    ]
  },
  "angularCompilerOptions": {
    "enableI18nLegacyMessageIdFormat": false,
    "strictInjectionParameters": true,
    "strictInputAccessModifiers": true,
    "strictTemplates": true
  }
}

How I import it in styles.scss

...
@import "@styles/spacing";
...

Error message

./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 - Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.
  ╷
4 │ @import "@styles/spacing";
  │         ^^^^^^^^^^^^^^^^^
  ╵
  src/styles.scss 4:9  root stylesheet

./src/styles.scss - Error: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
HookWebpackError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.
  ╷
4 │ @import "@styles/spacing";
  │         ^^^^^^^^^^^^^^^^^
  ╵
  src/styles.scss 4:9  root stylesheet
    at tryRunOrWebpackError (.../node_modules/webpack/lib/HookWebpackError.js:88:9)
    at __webpack_require_module__ (.../node_modules/webpack/lib/Compilation.js:5049:12)
    at __webpack_require__ (.../node_modules/webpack/lib/Compilation.js:5006:18)
    at .../node_modules/webpack/lib/Compilation.js:5077:20
    at symbolIterator (.../node_modules/neo-async/async.js:3485:9)
    at done (.../node_modules/neo-async/async.js:3527:9)
    at Hook.eval [as callAsync] (eval at create (.../node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (.../node_modules/tapable/lib/Hook.js:18:14)
    at .../webpack/lib/Compilation.js:4984:43
    at symbolIterator (.../node_modules/neo-async/async.js:3482:9)
-- inner error --
Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.
  ╷
4 │ @import "@styles/spacing";
  │         ^^^^^^^^^^^^^^^^^
  ╵
  src/styles.scss 4:9  root stylesheet
    at Object.<anonymous> (.../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:1:7)
    at .../node_modules/webpack/lib/javascript/JavascriptModulesPlugin.js:441:11
    at Hook.eval [as call] (eval at create (.../node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:7:1)
    at Hook.CALL_DELEGATE [as _call] (.../node_modules/tapable/lib/Hook.js:14:14)
    at .../node_modules/webpack/lib/Compilation.js:5051:39
    at tryRunOrWebpackError (.../node_modules/webpack/lib/HookWebpackError.js:83:7)
    at __webpack_require_module__ (.../node_modules/webpack/lib/Compilation.js:5049:12)
    at __webpack_require__ (.../node_modules/webpack/lib/Compilation.js:5006:18)
    at .../node_modules/webpack/lib/Compilation.js:5077:20
    at symbolIterator (.../node_modules/neo-async/async.js:3485:9)

Generated code for .../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
1 | throw new Error("Module build failed (from ./node_modules/sass-loader/dist/cjs.js):\nSassError: Can't find stylesheet to import.\n  ╷\n4 │ @import \"@styles/spacing\";\n  │         ^^^^^^^^^^^^^^^^^\n  ╵\n  src/styles.scss 4:9  root stylesheet");



✖ Failed to compile.

Thanks for any help!