使用angular-cli进行CSS编译

Question

我刚刚开始研究角4.0.0并且angular-cli很高兴。 但我面临着编译sass文件的问题。

而不是将所有组件.scss文件解析为一个，webpack正在添加一个带有所有css的内联样式标记。

是一个预期的行为还是我在angular-cli中缺少node-sass和sass-loader的一些配置

     "styles": [
    "styles.scss"
  ],
   "defaults": {
"styleExt": "scss",
"component": {}

}

这就是样式的cli配置。

为app配置styles.scss导入app.components.scss和 app.component.scss导入所有其他组件的scss。

感谢您的帮助。

Answer 1

文件styles.scss通常用于存储全局样式。请在此处详细了解：https://github.com/angular/angular-cli/wiki/stories-global-styles

如果您遇到问题样式问题 - 请仔细检查以确保package.json中包含node-sass。如果没有，那么npm install node-sass --save-dev

如果我正确理解你的问题，那么它是预期的行为，Angular会调用行为 View Encapsulation 。您可以在此处详细了解它以及Angular如何使用样式：https://angular.io/docs/ts/latest/guide/component-styles.html