如何配置Angular 16项目以正常使用SCSS混合（Mixin）？

出现这个错误的核心原因是你的Angular项目没有正确配置为处理SCSS文件，导致浏览器直接解析了未编译的SCSS语法（比如@mixin、@include），所以触发"Unknown property name"错误。按以下步骤排查修复：

1. 修正angular.json中的样式配置 #

打开项目根目录的angular.json，找到build和serve配置下的styles数组，确保主样式文件的扩展名是.scss：

"styles": [
  "src/styles.scss" // 确认这里是.scss，不是.css
],

若希望新项目组件默认使用SCSS，可在schematics中添加配置：

"schematics": {
  "@schematics/angular:component": {
    "style": "scss"
  }
}

2. 修改SCSS导入方式 #

SCSS中无需使用@import url()语法，直接用相对路径导入即可，否则可能导致mixins未被正确编译。修改styles.scss：

// 去掉url()，用SCSS原生导入
@import './assets/scss/mixins.scss';
@import './assets/scss/elements.scss';

3. 检查组件的样式文件配置 #

如果你的组件中仍在使用.css扩展名的样式文件，要么将文件重命名为.scss，要么在组件元数据中明确指定样式类型：

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.scss'], // 确保这里是.scss
  styles: []
})

4. 重启开发服务 #

修改配置后，必须停止当前的ng serve进程，重新执行ng serve让配置生效。

完成以上步骤后，SCSS会被Angular的构建工具正确编译为CSS，浏览器就不会再报未知属性错误了。

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