應用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

回答