为什么样式显示嵌入在 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

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

编辑：

参见上面 toioski 的回答。

Answer 2

我的第一个建议（如 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

你会得到这个：

为什么样式显示嵌入在 Angular 2 中的检查元素上

Why do the styles appear embedded on inspect element in Angular 2

css

scss-lint

angular