Including external css in Angular (4) app components

Question

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.

Rastislav · Accepted Answer · 2017-10-03 11:40:34Z

7

I know it is a bit late answer, but if somebody looks for solution:
You can use command line if you use nodeJS in your app folder write:

npm install --save w3-css

You should adjust then angular-cli.json in your src folder of your app and where you register styles type following:

"styles": [
        "../node_modules/w3-css/w3.css",
        "styles.css"
      ],

edited Oct 3, 2017 at 11:40

answered Oct 3, 2017 at 10:55

Rastislav

711 silver badge3 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mauricio De La Quintana · Accepted Answer · 2017-08-01 20:15:44Z

4

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.

edited Aug 1, 2017 at 20:15

answered Aug 1, 2017 at 16:16

Mauricio De La Quintana

2,44220 silver badges14 bronze badges

2 Comments

Cyclicduck Over a year ago

Thanks for the response, but I was actually considering css from the web.

Mauricio De La Quintana Over a year ago

thanks for the clarification, I've done some research and I have updated my response.

Collectives™ on Stack Overflow

Including external css in Angular (4) app components

2 Answers 2

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related