Angular 5 不会从 SCSS 生成一些 CSS 规则

Question

我编写了一个 Angular 5 应用程序，但无法生成一些 CSS 规则。 这是一个小例子，HTML：

<table class="table-rule">
    <tr>
        <td class="cell-rule">demo text</td>
    </tr>
</table>

SCSS：

.table-rule {
    font-weight: bold;
    .cell-rule {
        color: red;
    }
}

问题来了：我应该在表格中得到一个粗体的红色文本，但我只得到红色文本（不是粗体）。我发现Angular会生成这样一个CSS：

.table-rule .cell-rule { color: red }

它不会为“.table-rule”选择器生成 CSS 规则。仅适用于“.table-rule .cell-rule”选择器。

任何想法为什么会这样以及如何解决？

附：纯 HTML+CSS 工作正常：http://jsbin.com/maxagin/edit?html,css,output

Answer 1

发现一个问题：在生产 .scss 文件中，两条规则之间有一个空 cmets 行：

.rule1 {
    ...
}
/**/ <---- this one!
.rule1 {
    ...
}

删除此注释 (/**/) 修复了 SCSS 到 CSS 的转换。 SCSS 中的奇怪错误。