css - 为什么样式会嵌入 Angular 2 中的检查元素中

Question

我从互联网上下载了一个名为 dashgum 的免费 HTML 主题。我正在使用 angular-cli 为 Angular2 应用程序实现它。我将 css 文件转换为 .scss 并将代码粘贴到 Angular 应用程序中。然后，我将这些文件导入到名为 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

你会得到这个: