Angular: parsing JSON variables to SCSS causes unit tests(karma) to fail

问题

In my angular app, I am trying to use data from a json file into scss and I followed the solution provided here by Christos Lytara Angular: How to parse JSON variables into SCSS

Error Screenshot

I have tried this for my application and it works fine! But my unit test cases are failing. I am getting this error. Can someone please advise.

ERROR in ./src/app/components/get-to-know/get-to-know.component.scss Module build failed (from ./node_modules/sass-loader/dist/cjs.js): SassError: Invalid CSS after "{": expected 1 selector or at-rule, was "{" on line 1 of src/app/components/get-to-know/get-to-know.vars.json from line 1 of C:\Code\DignityHealth\fad-sass\src\app\components\get-to-know\get-to-know.component.scss

{ ^

SassError: SassError: Invalid CSS after "{": expected 1 selector or at-rule, was "{" on line 1 of src/app/components/get-to-know/get-to-know.vars.json from line 1 of C:\Code\DignityHealth\fad-sass\src\app\components\get-to-know\get-to-know.component.scss

{ ^

at Object.callback (C:\Code\DignityHealth\fad-sass\node_modules\sass-loader\dist\index.js:73:16)
at Object.done [as callback] (C:\Code\DignityHealth\fad-sass\node_modules\neo-async\async.js:8067:18)
at options.error (C:\Code\DignityHealth\fad-sass\node_modules\node-sass\lib\index.js:294:32)

@ ./src/app/components/get-to-know/get-to-know.component.ts 151:27-66 @ ./src/app/components/get-to-know/get-to-know.component.spec.ts @ ./src sync .spec.ts$ @ ./src/test.ts der?, options?, query? }]
-> Modifiers applied to the module when rule is matched Details: * configuration.module.rules[13].use[0].loader should be a string. * configuration.module.rules[13].use[0].loader should be one of these: non-empty string -> Loader name See "C:\Users\BALACH~1.MOH\AppData\Local\Temp\ng-aJysRZ\angular-errors.log" for further details.

来源：https://stackoverflow.com/questions/62433848/angular-parsing-json-variables-to-scss-causes-unit-testskarma-to-fail