你在哪里导入css在angular2 cli [英] where do you import css in angular2 cli

问题描述

  var Angular2App = require（'p'）当我们尝试在angular 2 cli中导入第三方库时， angular-cli / lib / broccoli / angular2-app'）; 
 
 module.exports = function（defaults）{
 return new Angular2App（defaults，{
 vendorNpmFiles：[
'@ angular2-material / ** / *。 js'
] 
}）; 
}; 
  

并且在system-config.ts中我们这样写：

  / **映射URL的相对路径。 * / 
 const map：any = {
'@ angular2-material'：'vendor / @ angular2-material'
}; 
 
 / **用户包配置。 * / 
 const packages：any = {
'@ angular2-material / core'：{
 format：'cjs'，
 defaultExtension：'js'，
 main：'core.js'
}，
'@ angular2-material / checkbox'：{
 format：'cjs'，
 defaultExtension：'js'，
 main：'checkbox.js'
}，
 //等等... 
}; 
  

和组件

  import {Component} from'@ angular / core'; 
 import {MdCheckbox} from'@ angular2-material / checkbox'; 
 
 @Component（{
 selector：'my-app'，
 template：`< md-checkbox>< / md-checkbox>`，
指令：[MdCheckbox] 
}）
 export class AppComponent {} 
  

all库是在.js，但如果它是css如何导入呢？
喜欢如何使用fontawesome，sweetalert或bootstrap？

解决方案

如果你想拉一个样式库（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">

这篇关于你在哪里导入css在angular2 cli的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！