Angular 5未生成SCSS中的部分CSS规则问题求助

我之前在Angular项目里也碰到过类似的SCSS编译异常，结合你的情况，给你几个排查和解决的方向：

1. 检查SCSS语法与独立编译测试 #

首先确认你的SCSS代码有没有隐性语法错误——有时候看似正确的代码，可能因为前面的代码遗漏分号、括号不匹配等问题，导致编译器跳过部分规则的生成。你可以把这段示例SCSS单独用本地node-sass命令行编译，看是否能生成完整的两个CSS规则：

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

如果单独编译能生成完整规则，那问题大概率出在Angular项目的配置或组件关联上；如果单独编译也只生成子元素规则，那就要排查实际项目里SCSS代码的隐藏语法问题。

2. 确认组件与SCSS文件的关联配置 #

检查组件@Component装饰器里的styleUrls路径是否正确，比如是否使用了相对路径（如./your-component.component.scss），有没有拼写错误。Angular如果找不到对应的SCSS文件，可能会静默忽略部分样式编译：

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.scss'] // 确认路径无错误
})

3. 调整SCSS写法，规避嵌套编译问题 #

虽然你的嵌套写法符合SCSS规范，但Angular 5使用的旧版node-sass可能存在嵌套编译的小bug。你可以尝试把父元素样式单独提取出来，不使用嵌套：

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

重新编译项目后，看父元素的样式是否能正常生成。如果可以，说明是嵌套编译的兼容性问题，你可以考虑升级项目的node-sass版本（注意选择与Angular 5兼容的版本，比如node-sass 4.14.x系列）。

4. 检查Angular CLI的预处理器配置 #

打开项目根目录的angular-cli.json（Angular 5使用该配置文件），确认stylePreprocessorOptions配置正常，且styles数组里没有错误引入全局样式导致冲突：

{
  "projects": {
    "your-project-name": {
      "architect": {
        "build": {
          "options": {
            "stylePreprocessorOptions": {
              "includePaths": []
            },
            "styles": [
              "src/styles.scss"
            ]
          }
        }
      }
    }
  }
}

确保没有错误配置导致SCSS编译不完整。

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