更新时间: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">