I'm trying to add SASS instead of vanilla CSS to the project and can get it mostly working.
There are no errors or warning messages when building the project. Almost all of the styles are applied after building; however, I use the /deep/ (>>>) special selector in a couple of components to pass a style down to the child component - I do this in order to conditionally apply a style to a specific class in a child component depending on its host/parent component. Here's an example of a style that exists in the host/parent component's stylesheet:
:host >>> .holder {
margin-top: 0px;
padding-top: 12px;
border-top: 2px solid #eee;
}
This is the only style that does not seem to be applied correctly. When viewing the UI locally in any browser, it's clear that the .holder class is not defined as above.
There seems to be much discussion of how to get SASS working in Angular 2 projects on StackOverflow, but nothing relating to SASS (or any other CSS preprocessor) and Angular 2 special selectors specifically. My question is two-fold:
将:host
替换为\\:host
并将>>>
替换为/deep/
对我有用。
For all who are using Latest versions of angular (4+),
Use :host ::ng-deep instad of :host /deep/
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.