angular中幾種加載css的方法

1.Style URLs in Metadata

We can load styles from external CSS files by adding a styleUrls attribute into a component's @Component decorator:

@Component({
    selector: 'hero-details',
    template: `
        <h2>{{hero.name}}</h2>
        <hero-team [hero]=hero></hero-team>
        <ng-content></ng-content>
    `,
    styleUrls: ['app/hero-details.component.css']
})
export class HeroDetailsComponent {
    /* . . . */
}

　　

2.Users of module bundlers like Webpack may also use the styles attribute to load styles from external files at build time. They could write:

styles: [require('my.component.css')]

We set the styles property, not styleUrls property! The module bundler is loading the CSS strings, not Angular. Angular only sees the CSS strings after the bundler loads them. To Angular it is as if we wrote the styles array by hand. Refer to the module bundler's documentation for information on loading CSS in this manner.

3.Template Link Tags

We can also embed <link> tags into the component's HTML template.

As with styleUrls, the link tag's href URL is relative to the application root, not relative to the component file.

@Component({
  selector: 'hero-team',
  template: `
    <link rel="stylesheet" href="app/hero-team.component.css">
    <h3>Team</h3>
    <ul>
      <li *ngFor="let member of hero.team">
        {{member}}
      </li>
    </ul>`
})

　　

4.CSS @imports

We can also import CSS files into our CSS files by using the standard CSS @import rule.

In this case the URL is relative to the CSS file into which we are importing.

src/app/hero-details.component.css (excerpt)：

@import 'hero-details-box.css';