I want to load component css in a specific order. I've got this component :
@Component({
selector: '[select2]',
styleUrls: [
"assets/plugins/select2/css/select2.min.css",
"assets/plugins/select2/css/select2-bootstrap.min.css"],
encapsulation: ViewEncapsulation.None
})
export class Select2Component { }
and this is what I get, when I'm using it:
<head>
<script src="angular.js"></script><!-- 2. Configure SystemJS-->
<script src="base.js"></script>
<script src="components.js"></script>
<script src="/assets/plugins/jquery-2.2.0.min.js"></script>
<script src="/assets/plugins/bootstrap/js/bootstrap.min.js"></script>
<!-- BEGIN GLOBAL MANDATORY STYLES-->
<link href="/assets/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<!-- END GLOBAL MANDATORY STYLES-->
<!-- BEGIN THEME GLOBAL STYLES-->
<link href="/assets/css/global/plugins.css" rel="stylesheet" type="text/css">
<!-- END THEME GLOBAL STYLES-->
<script>System.import('boot').catch(console.error.bind(console));</script>
<style> contents of "assets/plugins/select2/css/select2.min.css" </style>
<style> contents of "assets/plugins/select2/css/select2-bootstrap.min.css"</style>
</head>
The question is, can I set position where to load component styles? In this case I want them to load right before <!-- BEGIN THEME GLOBAL STYLES-->, not at the end of the head, because my plugins.css overrides some select2.css rules.
The result would be:
...
<!-- END GLOBAL MANDATORY STYLES-->
<style> contents of "assets/plugins/select2/css/select2.min.css" </style>
<style> contents of "assets/plugins/select2/css/select2-bootstrap.min.css"</style>
<!-- BEGIN THEME GLOBAL STYLES-->
...
insertBeforeandinsertAfter, but is it possible to do that automatically for every component?