在 Sass 文件中编写 CSS 会在 Angular 7 中引发错误答案

【问题标题】：Write CSS in Sass files throwing error in Angular 7在 Sass 文件中编写 CSS 会在 Angular 7 中引发错误
【发布时间】：2019-10-22 02:49:21
【问题描述】：

我正在尝试在 Angular 7 组件的 sass 文件中编写一个简单的 css 语法，但我遇到了如下所示的编译错误。

sass 文件只包含如图所示的简单 css

.full-width {
   width: 100%;
}

在早期的 Angular 版本中，我没有这样的问题。

【问题讨论】：

【解决方案1】：

根据您的 SCSS 文件的文件扩展名，您实际上使用的是 SASS，即 SCSS 的旧版本。如Sass syntax 的文档中所述，SASS 语言使用缩进语法。

缩进语法支持与 SCSS 相同的所有功能，但它使用缩进代替大括号和分号来描述文档的格式。

您应该做的是将 SCSS 文件的文件扩展名更改为 .scss，或将 SCSS 语法转换为 SASS。

【讨论】：

【解决方案2】：

这是 SASS 还是 SCSS ？

如果这是 SASS，则括号无效。只需删除它们以获得有效的 SASS。

.full-width 
   width: 100%;

如果你想保留括号，那么你想使用 SCSS 语言来代替。

在此处查看指南以了解两者之间的区别：https://sass-lang.com/guide

【讨论】：

嗨，谢谢。有效。您能否告诉我需要更改的项目配置，以便 scss 格式适用于整个项目，并且默认情况下应该创建 .scss 文件而不是 .sass？
当你创建一个新的 Angular 应用程序时，这应该是一个选项，但如果你查看 angular.json 文件，它应该列出样式使用的语言。查看这篇文章，了解如何通过 CLI 命令更改语言：medium.com/@manivel45/…