где вы импортируете css в angular2 cli

когда мы пытаемся импортировать сторонние библиотеки в 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?


person Rommy    schedule 23.06.2016    source источник


Ответы (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">
person Brocco    schedule 23.06.2016
comment
спасибо за ваши быстрые ответы, так что в основном мы просто копируем файл .css из node_module в общую папку? но как импортировать его в компонент? - person Rommy; 23.06.2016
comment
В основном, да. Вам не нужно импортировать его в компонент. Как вы думаете, что вам нужно импортировать? - person Brocco; 23.06.2016
comment
как модальная директива? для использования модального бутстрапа - person Rommy; 23.06.2016
comment
Если вы хотите использовать компоненты bootstrap JS, я предлагаю вам вместо этого изучить библиотеку, например ng2 bootstrap. github.com/valor-software/ng2-bootstrap - person Brocco; 23.06.2016
comment
@Rommy, вы можете увидеть этот ответ чтобы добавить начальную загрузку в проект angular cli"> stackoverflow.com/questions/37649164/ - person pd farhad; 23.06.2016