Cyclicduck Cyclicduck - 1 year ago 145
CSS Question

Including external css in Angular (4) app components

So from Load external css style into Angular 2 Component it seems that including css from an external url by putting it into the styleUrls[] worked for angular 2. It does not work for Angular though (it just searches for the css sheet under the directory). I can't find any documentation regarding this so I'm just hard-coding it into the entire index.html page for now. How can I get it to work for individual components?

Edit: To clarify, by external css I mean something like this: https://www.w3schools.com/w3css/4/w3.css, not something included in my project.

Answer Source

For including an external css (remote url)for an specific component. I've only found this way. For example for your app component.

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})

in your app.component.scss you can import a remote url with the desired remote styles like this css file your were commenting.

@import url('https://www.w3schools.com/w3css/4/w3.css');

Even thought it is not a perfect solution, hope it helps.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download