将外部css样式加载到Angular 2组件中
import {Component} from 'angular2/core'; @Component({ selector: 'my-app', template: '<div></div>', styleUrls: [ 'http://domain.com/external.css', 'app/local.css' ] }) export class AppComponent {} external.css不加载。 有什么办法来加载Angular 2组件的外部CSS？
另见https://angular.io/docs/ts/latest/guide/component-styles.html
查看封装
要允许外部样式影响组件的内容，您可以更改视图封装（这是防止样式“渗入”组件）。
@Component({ selector: 'some-component', template: '<div></div>', styleUrls: [ 'http://example.com/external.css', 'app/local.css' ], encapsulation: ViewEncapsulation.None, }) export class SomeComponent {}
视图封装达到目的。 更好的方法是直接添加样式到他们应该影响的组件。 ViewEncapsulation为每个组件设置，在某些情况下可能会派上用场。
“影子穿孔”
您也可以使用阴影穿透CSS combinator /deep/ （ >>>是一个等效的别名，但/deep/也可以与SASS一起使用）来构build跨越组件边界的select器
:host /deep/ .ng-invalid { border-bottom: solid 3px red; }
在当前组件或任何具有红色下划线的后代中设置所有具有ng-invalid标签，无论封装是None还是Emulated 。 这取决于浏览器是否支持/deep/ Native与Native 。
注意
穿透阴影的CSS组合器类似于来自阴影DOM规范的那些，因为它们在很久以前就被弃用了。
使用默认的 ViewEncapsulation.Emulated Angulars own /deep/和::shadow实现，即使Chrome删除本机支持，它们也能工作。
使用ViewEncapsulation.Native Angular使用Chromes阴影DOM CSS组合器（只有Chrome支持他们在所有AFAIK）。 如果Chrome最终删除了它们，那么它们将不能在Angular中工作（仅适用于ViewEncapsulation.Native ）。
全球风格
全局添加的样式（ index.html ）不考虑组件边界。 这样的样式不会被Angular2和ViewEncapsulation.Emulated重写。修饰不适用于它们。 只有在ViewEncapsulation.Native被设置且浏览器具有原生影子DOM支持的情况下，全局样式才能ViewEncapsulation.Native 。
首先 – styles / styleUrls只能用于任何直接影响模板中元素样式的CSS规则。
你的external.css没有得到应用到你的组件的原因是，当你从styleUrls或styles external.css中加载这些规则时，在编译时，angular2会在属性select器中附加一个独特的组件标识符。
例如，在你的external.css中，如果有一个像div.container { /*some rules*/ } ，它会变成div.container[_ngcontent-cds-2] { /*some rules*/ } 。 所以不pipe你怎么强制你的规则成为优先级规则，例如add !important标签，它都不会起作用 – 你的external.css中的所有select器都被限制在一个级别中去属性select器，只有组件元素相同的属性。 这是angular2如何将样式限制为仅当前组件。
当然，总是有一个解决方法。
这里是我的解决scheme – 我将添加一个外部资源服务，所有的JS脚本，它将使用SystemJS加载AMD或全球所有的CSS文件，它将使用普通的JavaScript创build一个<link>元素并将其附加到<head>元素。
这里是我的一段代码，供您考虑：
loadCSS(url) { // Create link let link = document.createElement('link'); link.href = url; link.rel = 'stylesheet'; link.type = 'text/css'; let head = document.getElementsByTagName('head')[0]; let links = head.getElementsByTagName('link'); let style = head.getElementsByTagName('style')[0]; // Check if the same style sheet has been loaded already. let isLoaded = false; for (var i = 0; i < links.length; i++) { var node = links[i]; if (node.href.indexOf(link.href) > -1) { isLoaded = true; } } if (isLoaded) return; head.insertBefore(link, style); }
