0

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.

V. B Chan
  • 7
  • 4
  • SCSS files are only parsed one time at ng serve time, so If anything is changed in SCSS file it takes down Karma hot reload! To make it work you have to restart using ng serve, make sure you ctl-c the current running ng serve instance. – JWP Jun 17 '20 at 16:34
  • @JohnPeters yes i did try that, but as I said the UI works as expected. But karma test cases are failing – V. B Chan Jun 17 '20 at 16:35
  • Ok that means this message needs to be fixed: SassError: Invalid CSS after "{": expected 1 selector or at-rule, was "{" @ ./src/test.ts **. ==> Do you see a "{" in test.ts? – JWP Jun 17 '20 at 16:52
  • @JohnPeters apologies, I have updated the exact error now – V. B Chan Jun 17 '20 at 16:57
  • https://stackoverflow.com/questions/59901516/webpack-4-build-with-angular-7-gives-problem-with-the-sass-loader-when-trying-to – JWP Jun 17 '20 at 17:24

0 Answers0