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

I downloaded a free HTML theme named dashgum from the internet. I'm implementing it for an Angular2 application using angular-cli. I converted the css files to .scss and pasted the code to the angular application. I then imported the files in the global styles file named styles.scss to apply the styles to the application like this:

我从互联网上下载了一个名为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');

The problem that I'm facing during debugging is that all the styles appear as embedded styles in the browser like this (notice the style tag):

我在调试过程中遇到的问题是所有样式在浏览器中都显示为嵌入式样式(请注意样式标记):

I want the style to appear as external styles while inspecting like in the theme. Please notice it in the following screenshot:

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

These are the default settings in Angular 2 as I made no apparent changes for the styles to appear embedded when inspecting. Is there any known way to change the settings in Angular 2 for the styles to appear as external styles when inspecting? The embedded styles make it harder for me to debug. Any help pointing out towards the solution would be appreciated.

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

2 个解决方案

#1

My first advice (like official Angular CLI documentation says) is to put your global library inside .angular-cli.json like this:

我的第一个建议(如官方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"
  ],
  ...

Then just run the app with the --extract-css parameter to see in the browser inspector the source files:

然后使用--extract-css参数运行应用程序,在浏览器检查器中查看源文件:

ng serve --extract-css

And you will have this:

你会得到这个:

#2

I have learned that the styles imported in the global styles.scss file always appears embedded when inspecting in the browser. If we want the css to appear as external styles, we will have to use it in components.

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

Edit:

See toioski's answer above.

请参阅上面的toioski答案。

#1