应用CSS样式的所有组件在角2应用

我有非常基本的，且可重复使用的CSS规则，如：应用CSS样式的所有组件在角2应用

.ng-invalid { 
    border-left: 5px solid #a94442; 
} 

.ng-valid { 
    border-left: 5px solid #42A948; 
}

我想重新使用这些我所有的组件。如果我将它放在我的根AppComponent（由Angular引导的根目录）中，那么除了AppComponent之外，它不会被我的应用程序中的任何其他组件识别。

我必须在这里丢失一些非常明显的东西。

2016-04-14 mariocatch

也许你应该在你的html或外部样式表中声明全局css规则。

2016-04-14 20:44:22 kemsky

想我想得太多**关于这个的角度**。是的，你是对的哈哈。 – mariocatch

可以实现这一目标我改变你的风格

:host .ng-invalid { 
    border-left: 5px solid #a94442; 
} 

:host .ng-valid { 
    border-left: 5px solid #42A948; 
}

，并在你的子组件，您可以设置的encapsulation: ViewEncapsulation.None属性（但默认情况下它是ViewEncapsulation.None所以你可能没必要也设定）。

所以现在你应该能够在你的所有子组件中使用你的风格类。

2016-04-14 21:31:55 sreeramu

角增加了独特的类的组件和重写的CSS选择器添加到组件仅仅匹配的组件唯一的类，添加CSS到<head>之前。这是为了模拟阴影DOM风格的封装。

你可以解决它通过

设置encapsulation: ViewEncapsulation.None防止重写组件的风格，其中封装是禁用
的CSS添加到index.html直接。 Angular不会重写未添加到组件的CSS。使用“阴影穿透CSS组合器”* >>> someSelector { ... }，这也使CSS忽略添加到组件的唯一类。
提示：/deep/是>>>的别名，但对SASS更好。

2016-04-15 05:38:47

从命令行运行：

NPM安装文件装载机式装载机--save-dev的

现在webpack.config.js添加以下行至装载机数组：

{测试：/\.(eot|woff2|woff|ttf|svg)/，装载机： '文件加载'}

现在，在您app.component.ts，import语句后，加以下行：

require（'style！bootstrap/dist/css/bootstrap。CSS'）

这里假设你使用的是最新版本的angular2/angular2种的设在这里：https://github.com/angular/angular2-seed为2016年11月8日

2016-11-08 10:08:35 SlimSim

在我看来，你应该同意特定的策略在您的整个这方面的球队。

E.g.你可以设置encapsulation: ViewEncapsulation.None就像他在回复中提到的@sreeramu。但仅限于应用程序（根）组件。

您应该尽可能多地利用CSS封装，因此关闭几个组件会有点臭。但是只将它应用于一个组件可能工作正常。

2017-03-29 07:34:39 marekozw

你可以写你的CSS的src/Styles.css中

内，也可以创建新的CSS文件并指定内部.angular-cli.json文件

"apps": [ 
    "styles": ["styles.scss"] 
]

2017-07-06 06:47:41

回答