且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

你在哪里导入css在angular2 cli

更新时间:2023-09-30 10:31:52

如果你想拉一个样式库(bootstrap / font-awesome)可以将文件放在生成的 public 目录中。



一个样式目录并将文件放在其中,例如....

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

当构建运行时,它将使用 public 并移动到dist ...

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

您可以在index.html中引用这些文件,例如...

 < link rel =stylesheethref =style / bootstrap.css> 


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 ?

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