Angular14本地serve时sass-loader编译Sass报Expected newline错误

这个SassError: Expected newline报错是Sass语法规则和文件后缀不匹配导致的：

• 后缀为.sass的文件，Sass解析器默认采用缩进式语法：不使用大括号包裹样式块、不使用分号作为属性结尾，完全靠代码缩进层级区分选择器嵌套关系
• 你当前app.component.sass里写的是带{}、;的SCSS格式语法，解析器读到第一行选择器末尾的{时，预期是直接换行进入缩进块，不符合语法规则直接抛出错误，报错指向的第1行第15列刚好就是这个左大括号的位置，完全匹配。

二选一即可：

方案1：改文件后缀为SCSS（不用改现有样式代码，成本最低） #

• 第一步：将src/app/app.component.sass重命名为src/app/app.component.scss
• 第二步：打开同目录下的app.component.ts，把组件装饰器里的样式文件引用路径同步修改：

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'] // 原来的.sass后缀改成.scss
})

• 第三步：重新执行ng serve启动项目即可正常编译。

方案2：保留.sass后缀，改写为Sass缩进语法 #

如果要继续使用.sass后缀，把文件里的大括号、分号全部删除，靠缩进控制样式层级即可，修改后的app.component.sass代码如下：

.example-icon
  padding: 0 14px

.example-spacer
  flex: 1 1 auto

保存文件后开发服务器会自动热更新编译，不需要手动重启服务。

你当前package.json里手动安装了sass-loader、webpack、node-sass三个依赖，Angular 14的构建工具链已经内置了dart-sass预处理器和对应loader，手动额外安装这几个包很容易出现版本冲突，如果改完上述配置还是有编译报错，可以直接把这三个依赖从package.json中移除，重新执行npm install安装依赖后再启动即可。

内容的提问来源于stack exchange，提问作者Harry