css - 无法在 Angular 4 中添加 Sass

标签 css angular sass

我在 angular 4 中创建了一个空白元素,我正在尝试设计它,但是当我添加 sass 并运行元素时,sass 无法正常工作,我收到此错误

body{
    h1{
        color : red;
    }
}
    ^
      Invalid CSS after "body{": expected "}", was "{"
      in C:projectname/src\styles.sass (line 1, column 6)

我的index.html代码是

<body>
  <h1>Here</h1>
</body>

任何帮助将不胜感激

最佳答案

根据您的错误消息 (C:projectname/src\styles.sass) 您似乎正在为 SCSS 文件使用 .sass 扩展名。将文件名更改为 styles.scss

SassSCSS 使用两种不同且不兼容的语法。

There are two syntaxes available for Sass. The first, known as SCSS (Sassy CSS) and used throughout this reference, is an extension of the syntax of CSS. This means that every valid CSS stylesheet is a valid SCSS file with the same meaning. This syntax is enhanced with the Sass features described below. Files using this syntax have the .scss extension.

The second and older syntax, known as the indented syntax (or sometimes just “Sass”), provides a more concise way of writing CSS. It uses indentation rather than brackets to indicate nesting of selectors, and newlines rather than semicolons to separate properties. Files using this syntax have the .sass extension.

关于css - 无法在 Angular 4 中添加 Sass,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56654774/

相关文章:

sass - 如何在 Sublime Text 3 中自动将 Sass 编译为 CSS?

javascript - 在 iframe 之外显示元素

html - 如何在使用 md 对话框时禁用背景?

javascript - 在 JSX 代码中将年龄数字显示为红色和粗体

css - Scss @mixin 函数

html - Bootstrap 4 SCSS 覆盖不起作用

css - YUI-3 网格 && 谷歌浏览器 : Overlapping text

Angular2 我可以得到 ngFor 的计数吗?

带有路由器的 Angular 2 redirectTo 不起作用

javascript - 如何通过 Angular 检查空格键事件?