@import styles in angular component's styles with ::ng-deep
Question
Using Angular 5, angular-cli with scss.
I'm creating angular component that uses 3rd party component ( angular-tree-component ). I need to import styles for the tree. Because of styles isolation in angular (using the default emulated view encapsulation) the only way how to achieve it is using ::ng-deep , like this:
:host ::ng-deep {
@import '~angular-tree-component/dist/angular-tree-component.css';
}
But this does not work - it looks like the @import is ignored inside the :host ::ng-deep . I workarounded it by copying the content of the css file directly within the brackets but its suboptimal as if the referenced package was upgraded then I would have to manually replace the content with the new styles.
Only other workaround I can think of is changing the view encapsulation to None but it seems even worse as it makes the styles global.
Is there any better option?
2 answers
solution1
5 2018-05-29 22:39:09
For me, in an Angular CLI 6 project, all works fine when not including the file's suffix. Like if the actual file is simplemde.min.css :
:host ::ng-deep {
// For proper scoping, do not include the .css file suffix here
@import '~simplemde/dist/simplemde.min';
}
So, the above works without the need for encapsulation: ViewEncapsulation.None . And it also makes non-scoped content (typically HTML that is created at runtime outside of Angular, like in my case the HTML generated for the SimpleMDE Markdown editor ) be styled as expected.
Some background:
With the suffix, the @import is actually processed as well; whenever my component was instantiated a scoped <style> element was added to <head> :
Note that this yields scoping for _ngcontent , and this does not work well for ::ng-deep , leaving dynamic child content unstyled.
However, without the suffix, one gets:
Above, the scoping is using _nghost .
I wonder if this is a bug, or documented behaviour. (And maybe things are even different for Sass files? Using @import for CSS is non-standard behaviour which will be removed in future versions of LibSass ...)
Note that :host is needed. With just ::ng-deep the result with the file suffix is the same. But without the file suffix the styles are not scoped at all when not using :host :
Looking at the rendered web pages I have very much been fooled into thinking this worked too (and one's own styles are still nicely scoped, so this is a partial success). But the third party CSS is effectively imported without any scoping when not using :host .
solution2
1 2018-05-15 23:28:57
Try this:
/deep/ {
@import '~angular-tree-component/dist/angular-tree-component.css';
}
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.