where do you import css in angular2 cli

Question

when we try to import 3rd party libs in angular 2 cli we are using this,

var Angular2App = require('angular-cli/lib/broccoli/angular2-app');

module.exports = function(defaults) {
  return new Angular2App(defaults, {
    vendorNpmFiles: [
      '@angular2-material/**/*.js'
    ]
  });
};

and in system-config.ts we write it like this,

/** Map relative paths to URLs. */
const map: any = {
  '@angular2-material': 'vendor/@angular2-material'
};

/** User packages configuration. */
const packages: any = {
  '@angular2-material/core': {
    format: 'cjs',
    defaultExtension: 'js',
    main: 'core.js'
  },
  '@angular2-material/checkbox': {
    format: 'cjs',
    defaultExtension: 'js',
    main: 'checkbox.js'
  },
  // And so on...
};

and in component

import { Component } from '@angular/core';
import { MdCheckbox } from '@angular2-material/checkbox';

@Component({
  selector: 'my-app',
  template: `<md-checkbox></md-checkbox>`,
  directives: [MdCheckbox]
})
export class AppComponent { }

all library is in .js but what if it's css how do we import it? like how to use fontawesome , sweetalert or bootstrap ?

Answer 1

If you'd like to pull in a style library (bootstrap/font-awesome) you can place the files in the generated public directory.

Within there I create a style directory and place the files in there for example....

[project-root]/public/style/bootstrap.css

When builds run it will take the contents of public and move it to dist...

[project-root]/dist/style/bootstrap.css

And you can reference these files within index.html like so...

<link rel="stylesheet" href="style/bootstrap.css">