2

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.

Cyclicduck
  • 583
  • 1
  • 6
  • 11

2 Answers2

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"
      ],
Rastislav
  • 71
  • 1
  • 3
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.

Mauricio De La Quintana
  • 2,362
  • 16
  • 14