你在哪里导入 angular2 cli 中的 css

Question

当我们尝试在 Angular 2 cli 中导入第 3 方库时，我们正在使用它，

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

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

在 system-config.ts 我们这样写，

/** 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...
};

在组件中

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 { }

所有库都在 .js 中，但如果是 css 怎么导入呢？ 喜欢如何使用 fontawesome 、 sweetalert 或 bootstrap ？

Answer 1

如果您想引入样式库 (bootstrap/font-awesome)，您可以将文件放在生成的 public 目录中。

在其中我创建了一个样式目录并将文件放在那里，例如......

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

当构建运行时，它将获取 public 的内容并将其移动到 dist...

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

您可以像这样在 index.html 中引用这些文件...

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