Sass使用CSS大括号语法在Angular CLI中报错求助

嘿，我明白你遇到的问题了——明明Sass应该兼容常规CSS写法，但带大括号的代码报错，缩进式写法却正常，这其实是文件扩展名和Angular CLI对Sass语法的识别方式在搞鬼！

问题根源 #

Sass其实有两种语法规范：

• SCSS（.scss）：完全兼容标准CSS语法，支持大括号、分号，是目前最主流的Sass写法；
• 缩进式Sass（.sass）：摒弃大括号和分号，靠缩进、换行来划分代码块，这种语法对大括号是完全不兼容的，所以你写body { ... }会被CLI判定为语法错误。

你的项目里应该是把样式文件保存成了.sass扩展名，CLI按照缩进式Sass语法解析代码，自然会把大括号当成非法字符。

解决方法 #

这里有两种方案，你可以根据需求选择：

方案1：改用SCSS扩展名（推荐）

把你的样式文件从.sass改成.scss，然后做以下两处检查：

• 如果是全局样式，打开angular.json，找到projects -> [你的项目名] -> architect -> build -> options -> styles数组，把对应的文件路径也更新为.scss；
• 如果是组件内样式，修改组件元数据里的styleUrls或styles引用，替换成.scss文件。

改完之后，你就能正常写带大括号的常规CSS代码了，SCSS会完美兼容它，同时你还能使用Sass的进阶特性（比如变量、嵌套、混合宏）。

方案2：继续用.sass但遵循缩进语法（不推荐，除非你偏好这种写法）

如果你坚持要使用.sass文件，那必须严格遵循缩进式语法规则：去掉大括号和多余的分号，靠缩进区分代码层级，比如：

body
  background: #ccc
  border: 2px solid red

不过这种写法和常规CSS差异较大，团队协作时容易产生混淆，还是更推荐使用SCSS。

额外排查点 #

如果你已经用了.scss但还是报错，可以试试：

• 确认angular.json里的stylePreprocessorOptions配置没有强制指定缩进式语法；
• 重启Angular CLI开发服务器（ng serve），有时候缓存会导致配置更新不生效。

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