updating from `sass` to `scss` in angular

Question

when I create my angular app, I used the params as --style=sass But I would switch to scss for that again i run ng set defaults.styleExt scss and changed all files ext to .scss.

But still getting error as :

ERROR in ./src/app/app.component.ts
Module not found: Error: Can't resolve './app.component.sass' in 'C:\DHL\Projects\retailApp\src\app'
ERROR in ./src/app/footer/footer.component.ts
Module not found: Error: Can't resolve './footer.component.sass' in 'C:\DHL\Projects\retailApp\src\app\footer'
ERROR in ./src/app/header/header.component.ts
Module not found: Error: Can't resolve './header.component.sass' in 'C:\DHL\Projects\retailApp\src\app\header'
ERROR in ./src/app/pages/home/home.component.ts
Module not found: Error: Can't resolve './home.component.sass' in 'C:\DHL\Projects\retailApp\src\app\pages\home'
ERROR in multi ./src/assets/css/reset.css ./src/styles.sass
Module not found: Error: Can't resolve 'C:\DHL\Projects\retailApp\src\assets\css\reset.css' in 'C:\DHL\Projects\retailApp'
ERROR in multi ./src/assets/css/reset.css ./src/styles.sass
Module not found: Error: Can't resolve 'C:\DHL\Projects\retailApp\src\styles.sass' in 'C:\DHL\Projects\retailApp'

what is the issue here? any one help me

Answer 1

According to error, this will changed all files extension but not imports. So, you need to manually change all imports in all the components from sass to scss like this

@Component({
  ........
  styleUrls: [ './marketing.component.scss' ] // change here
   ............
})

Answer 2

All of your files have references to SASS files.

You need to open every file stated there, and look at the decorator of the class that will look like this

@Component({
  selector: 'XX'
  templateUrl: XXX.html
  styleUrls: ['XX.sass']
})
export class XXX {}

replace sass with scss and you should be good.