Angular中创建嵌套CSS类遇语法错误，同款写法在其他项目可运行

嘿，我完全懂你碰到的这个坑！你写的嵌套CSS语法在其他项目能跑，但在新Angular项目里报错，核心原因其实很简单：Angular组件默认使用的是标准CSS，而标准CSS并不支持这种嵌套类的写法——你之前的项目肯定是配置了Sass（.scss）、Less这类CSS预处理器，它们才支持嵌套语法。

给你几个具体的解决步骤：

• 修改样式文件后缀：把你的组件样式文件从.css改成.scss（比如your-component.component.css → your-component.component.scss），然后在组件的@Component装饰器里同步更新styleUrls路径的后缀：

  @Component({
    selector: 'app-your-component',
    templateUrl: './your-component.component.html',
    styleUrls: ['./your-component.component.scss'] // 这里改成scss后缀
  })
  

• 确保项目支持Sass预处理器：如果是新建项目时没指定用Sass，需要调整angular.json的配置：
  找到projects -> [你的项目名] -> schematics -> @schematics/angular:component，添加或修改style字段为scss，这样以后新建组件默认就会生成.scss样式文件：

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

  另外，在architect -> build -> options -> styles里，如果有全局样式文件是.css后缀，也可以改成.scss，保持统一。

• 小细节提醒：你代码里的background-color:xyz是无效的颜色值哦，得改成合法的格式比如background-color: #ff0000或者background-color: red，不过这不是这次报错的原因，但也是要注意的点~

这样调整之后，你的嵌套CSS语法就能正常被解析啦！

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