为什么样式出现在Angular 2

Question

我从互联网上下载了一个名为 dashgum 的免费HTML主题。我正在使用 angular-cli 为Angular2应用程序实现它。我将css文件转换为.scss并将代码粘贴到角度应用程序中。然后我在名为 styles.scss 的全局样式文件中导入文件，以将样式应用于应用程序，如下所示：

@import url('./scss/bootstrap.scss');
@import url('./scss/font-awesome/css/font-awesome.scss');
@import url('./scss/zabuto_calender.scss');
@import url('./scss/gritter/css/jquery.gritter.scss');
@import url('./scss/lineicons/style.scss');
@import url('./scss/style.scss');
@import url('./scss/style-responsive.scss');

我在调试过程中面临的问题是所有样式在浏览器中都显示为嵌入式样式（请注意样式标记）：

我希望样式在主题中检查时显示为外部样式。请注意以下屏幕截图：

这些是Angular 2中的默认设置，因为我在检查时没有对要显示的样式进行明显更改。是否有任何已知方法可以更改Angular 2中的设置，以便样式在检查时显示为外部样式？嵌入式样式使我更难调试。任何指出解决方案的帮助都将不胜感激。

Answer 1

我的第一个建议（如official Angular CLI documentation所述）是将您的全局库置于.angular-cli.json内：

  ...
  "styles": [
    "../node_modules/bootstrap/dist/css/bootstrap.min.css",
    "../node_modules/font-awesome/css/font-awesome.min.css",
    "styles.scss"
  ],
  ...

然后只需使用--extract-css参数运行应用，即可在浏览器检查器中查看源文件：

ng serve --extract-css

你会有这个：

Answer 2

我了解到，在浏览器中检查时，全局styles.scss文件中导入的样式始终显示为嵌入式。如果我们希望css显示为外部样式，我们将不得不在组件中使用它。

编辑：

见上面的toioski答案。