在Angular中从“ Sass”更新为`scss

Question

创建Angular应用程序时，我将参数用作--style=sass，但是我会再次切换到scss，再次运行ng set defaults.styleExt scss并将所有文件更改为.scss。

，但仍会遇到错误：

ERROR in ./src/app/app.component.ts
Module not found: Error: Can't resolve './app.component.sass' in 'C:DHLProjectsretailAppsrcapp'
ERROR in ./src/app/footer/footer.component.ts
Module not found: Error: Can't resolve './footer.component.sass' in 'C:DHLProjectsretailAppsrcappfooter'
ERROR in ./src/app/header/header.component.ts
Module not found: Error: Can't resolve './header.component.sass' in 'C:DHLProjectsretailAppsrcappheader'
ERROR in ./src/app/pages/home/home.component.ts
Module not found: Error: Can't resolve './home.component.sass' in 'C:DHLProjectsretailAppsrcapppageshome'
ERROR in multi ./src/assets/css/reset.css ./src/styles.sass
Module not found: Error: Can't resolve 'C:DHLProjectsretailAppsrcassetscssreset.css' in 'C:DHLProjectsretailApp'
ERROR in multi ./src/assets/css/reset.css ./src/styles.sass
Module not found: Error: Can't resolve 'C:DHLProjectsretailAppsrcstyles.sass' in 'C:DHLProjectsretailApp'

这里有什么问题？任何人帮助我

Answer 1

根据错误，这将更改所有文件扩展名，但不会更改导入。因此，您需要手动将所有组件中的所有导入从sass更改为 scss

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

Answer 2

您的所有文件都有对SASS文件的引用。

您需要在那里打开每个文件，然后查看班级的装饰者，看起来像这样

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

用scss替换sass，您应该很好。