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