在 Angular (4) 应用组件中包含外部 css答案

【问题标题】：Including external css in Angular (4) app components在 Angular (4) 应用组件中包含外部 css
【发布时间】：2017-10-03 19:40:34
【问题描述】：

所以从Load external css style into Angular 2 Component 看来，通过将外部 url 放入 styleUrls[] 来包含 css 似乎适用于 Angular 2。但它不适用于 Angular（它只是搜索目录下的 css 表）。我找不到任何关于此的文档，所以我现在只是将它硬编码到整个 index.html 页面中。如何让它适用于单个组件？

编辑：澄清一下，通过外部 css，我的意思是这样的：https://www.w3schools.com/w3css/4/w3.css，而不是我的项目中包含的东西。

【问题讨论】：

标签： css angular

【解决方案1】：

我知道答案有点晚了，但是如果有人在寻找解决方案：
如果您在应用程序文件夹中使用 nodeJS，则可以使用命令行：

npm install --save w3-css

您应该在您的应用程序的src 文件夹中调整angular-cli.json，并在其中注册样式类型如下：

"styles": [
        "../node_modules/w3-css/w3.css",
        "styles.css"
      ],

【讨论】：

【解决方案2】：

用于包含特定组件的外部 css（远程 url）。我只发现了这种方式。例如对于您的应用程序组件。

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})

在您的 app.component.scss 中，您可以导入具有所需远程样式的远程 url，例如您正在评论的这个 css 文件。

@import url('https://www.w3schools.com/w3css/4/w3.css');

即使认为这不是一个完美的解决方案，希望它有所帮助。

【讨论】：

感谢您的回复，但我实际上正在考虑来自网络的 css。
感谢您的澄清，我已经做了一些研究并更新了我的回复。