你在哪里导入 css 在 angular2 cli

Question

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

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">

你在哪里导入 css 在 angular2 cli

where do you import css in angular2 cli

css

font-awesome

bootstrap-modal

sweetalert

angular