11

我从 Internet 下载了一个名为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 中的设置以使样式在检查时显示为外部样式？嵌入式样式使我更难调试。任何指出解决方案的帮助将不胜感激。

4

2 回答 2

5

我的第一个建议（就像官方 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

你会得到这个：

检查器元素结果

于 2017-08-09T10:20:41.860 回答
2

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

编辑：

见上面toioski的回答。

于 2016-11-16T10:11:08.137 回答