Angular项目从sass切换至scss后仍出现模块找不到错误的技术问询

架构老林

2026-5-26

解决Angular从Sass切换到Scss后找不到样式文件的问题

你已经完成了基础的配置修改和文件重命名，但仍出现找不到.sass文件的错误，这大概率是组件代码里的样式引用没更新，或是CLI配置没完全生效导致的。我给你一步步排查解决：

1. 优先检查组件文件里的`styleUrls`引用

这是最容易忽略的关键！你只修改了文件扩展名，但每个组件的.ts文件中，styleUrls数组里还是指向旧的.sass路径。比如：

// app.component.ts 原代码
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.sass'] // 这里还是.sass！
})

你需要把所有组件（包括报错的footer.component.ts）的styleUrls扩展名都改成.scss：

styleUrls: ['./app.component.scss']

2. 确认Angular CLI配置文件是否正确更新

不同版本的Angular CLI配置文件位置和结构不同，先执行ng --version查看版本：

Angular 6+版本：打开项目根目录的angular.json，做两处修改：
- 找到schematics -> @schematics/angular:component，把style值设为scss：
```
"schematics": {
  "@schematics/angular:component": {
    "style": "scss"
  }
}
```
- 找到projects -> 你的项目名 -> architect -> build -> options，将styleExt改为scss；同样在test -> options里也同步修改styleExt为scss。
Angular 5及以下版本：打开.angular-cli.json，找到defaults -> styleExt，设置为scss：
```
"defaults": {
  "styleExt": "scss",
  // 其他配置...
}
```