current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Stack Overflow is a community of 4.7 million programmers, just like you, helping each other.

Join them; it only takes a minute:

Sign up
Join the Stack Overflow community to:
  1. Ask programming questions
  2. Answer and help your peers
  3. Get recognized for your expertise
up vote 4 down vote favorite 
import {Component} from 'angular2/core';

@Component({
    selector: 'my-app',
    template: '<div></div>',
    styleUrls: [
        'http://domain.com/external.css',
        'app/local.css'
    ]
})
export class AppComponent {}

The external.css does not load. Anyway to load external css in Angular 2 Component?

share|improve this question
    
Do you get any errors in the browser console? – Günter Zöchbauer Jan 15 at 9:21
    
Angular simply ignore the external one and not loaded. – CallMeLaNN Jan 15 at 9:41
up vote 7 down vote accepted

To allow external styles to affect the content of components you can change view encapsulation (that's what prevents styles to "bleed into" components). 

@Component({
    selector: 'some-component',
    template: '<div></div>',
    styleUrls: [
        'http://domain.com/external.css',
        'app/local.css'
    ], 
    encapsulation: ViewEncapsulation.None, 
})
export class SomeComponent {}

View encapsulation fulfills a purpose. The better way is to add styles directly to the component they should affect. ViewEncapsulation is set per component and may come handy in some situations.

You can also use shadow piercing CSS combinator >>> (alias /deep/) to build selectors that cross component boundaries like

:host >>> .ng-invalid {
  border-bottom: solid 3px red;
}

which styles all tags with a class ng-invalid in the current component or any descendant with a red underline no matter if encapsulation is None or Emulated. It depends on browser support whether >>> works with Native.

share|improve this answer
1  
P.S. When using encapsulation, a component selector is recommended to written into your Local.css to restrict the rules target. – Zhenyang Hua Jan 23 at 12:58
    
@ZhenyangHua how can someone achieve that in terms of code?do you have an example? – Petros Kyriakou Feb 15 at 19:17
up vote 2 down vote

First of all - The styles/styleUrls should only be used for any css rules that directly affect the style of the element from your template.

The reason your external.css doesn't get to applied to your component is because when you load these rules in external.css from styleUrls or styles, upon compiling, angular2 will append a unique component identifier like attribution selector to your original selectors.

For example, in your external.css, if there is a rule like div.container { /*some rules*/ }, it will become div.container[_ngcontent-cds-2] { /*some rules*/ }. So no matter how hard your try to force your rules become priority rules e.g. add !important tag, it is not going to work -- all selectors in your external.css have been restricted down one level to attribute selector, only the component element carries the same attribute. This is how angular2 restrict the styles to only current component.

Of course there is always a workaround.

Here is my solution -- I will add a external resource service, for all the js script, it will be using SystemJS to load either AMD or Globally, for all the css files, it will be using plain javascript to create a <link> element and append it to <head> element.

Here is a piece of my code for you consideration:

loadCSS(url) {
  // Create link
  let link = document.createElement('link');
  link.href = url;
  link.rel = 'stylesheet';
  link.type = 'text/css';
  
  let head = document.getElementsByTagName('head')[0];
  let links = head.getElementsByTagName('link');
  let style = head.getElementsByTagName('style')[0];
  
  // Check if the same style sheet has been loaded already.
  let isLoaded = false;  
  for (var i = 0; i < links.length; i++) {
    var node = links[i];
    if (node.href.indexOf(link.href) > -1) {
      isLoaded = true;
    }
  }
  if (isLoaded) return;
  head.insertBefore(link, style);
}

share|improve this answer
up vote -2 down vote

Absolutely you can probably change to attribute style maybe like this :

@Component({
  selector: 'my-app',
  template: '<div></div>',
  style: [
    'http://domain.com/external.css',
    require('./app/local.css')
 ]
})

Hopefully can help you :D good luck

share|improve this answer
    
You're sure this works? style is for inline styles like div { background: black; }. I would expect it to at least require an @import() – Günter Zöchbauer Jan 15 at 9:20
    
yeah absolutely this work for me :) – masadi zainul Jan 15 at 9:25
1  
This doesn't work. – Zhenyang Hua Jan 23 at 4:33
1  
this deosn't work. you have to use styleUrls: [ ... ] instead of style: [ ... ]. – MovGP0 Jan 29 at 16:18
    
please see edited answer, use require for local and don't down vote – masadi zainul Feb 1 at 2:14

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.