Question

当我们尝试在角度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">

你在哪里导入angular2 cli中的css

1 个答案: