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: `
        
{{hero.name}}
        
        
    `,
    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   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: `
    
    
Team
    

      

        {{member}}
      
    
`
})

　　
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';

　　
転載先:https://www.cnblogs.com/ihzeng/p/7051319.html