angular ng test throws error: Can't find stylesheet to import. @use "@styles" as *;

I'm using angular version 18 and when I run ng test to test some of my components, it ends with this error: Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js): Can't find stylesheet to import. @use "@styles" as *;

tsconfig.json

{
"compileOnSave": false,
"compilerOptions": {
"outDir": "./dist/out-tsc",
"strict": true,
"noImplicitOverride": true,
"noPropertyAccessFromIndexSignature": true,
"noImplicitReturns": true,
"noFallthroughCasesInSwitch": true,
"skipLibCheck": true,
"isolatedModules": true,
"esModuleInterop": true,
"sourceMap": true,
"declaration": false,
"experimentalDecorators": true,
"moduleResolution": "bundler",
"importHelpers": true,
"target": "ES2022",
"module": "ES2022",
"lib": [
"ES2022",
"dom"
],
"paths": {
"@enums/*": ["../../library/projects/library/src/enums/*"],
"@models/*": ["../../library/projects/library/src/models/*"],
"@dtos/*": ["../../library/projects/library/src/dtos/*"],
"@styles": ["./src/styles.scss"],
"@components/*": ["./src/app/components/*"]
}
},
"angularCompilerOptions": {
"enableI18nLegacyMessageIdFormat": false,
"strictInjectionParameters": true,
"strictInputAccessModifiers": true,
"strictTemplates": true
}
}


component.scss

@use "@styles" as *;

ng-test result

> frontend@0.0.0 test
> ng test

✔ Browser application bundle generation complete.

./src/app/components/accordion-item/accordion-item.component.scss?ngResource - Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
Can't find stylesheet to import.
╷
1 │ @use "@styles" as *;
│ ^^^^^^^^^^^^^^^^^^^
╵


I expect ng test to work as expected, but sass-loader gives an error when I import a shortened file path in scss files. How can I fix this?

Continue reading...