为什么样式会出现在Angular 2中的inspect元素中

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

我的第一个建议（如官方的 Angular CLI 文档所说）是将你的全局库.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

你会得到这个：