这不是关于如何将Bootstrap添加到Angular应用程序的问题...这是不同的,我正在寻求如何添加到Angular库的意见...我应该将其与我的库打包还是作为对等依赖项?如果它是对等依赖项,我该如何处理?
我还需要在库项目中使用一些来自Bootstrap的mixin。如何在库项目中获取它们?
我认为这里的许多答案都忽略了问题不在于如何将Bootstrap添加到Angular应用程序中,而是专门关于如何将Bootstrap添加到自定义的Angular库中。不确定您是否已经找到解决方案,但这是对我有用的方法。
project/your-library/package.json
的peerDependencies
部分中添加Bootstrap,例如:{ "name": "your-library", "version": "0.0.1", "peerDependencies": { "@angular/common": "^6.0.0-rc.0 || ^6.0.0", "@angular/core": "^6.0.0-rc.0 || ^6.0.0", "bootstrap": "^4.3.1" } }
这将在另一个项目中使用您的库作为依赖项时安装Bootstrap。
.scss
文件(例如your-component.scss
)并添加以下行:@import "node_modules/bootstrap/scss/bootstrap"
.scss
文件指定为styleUrls
,例如:@Component({ selector: 'your-lib', templateUrl: './your-component.html', styleUrls: ['./your-component.scss'] }) export class YourComponent {
....
}
在包含你的库的项目的顶层 package.json
的 devDependencies
部分中添加 bootstrap。这将允许你在开发库时使用 bootstrap。
在项目根目录下运行 npm install
。
在项目根目录下运行 ng build your-library
。
"peerDependencies": {
"ngx-bootstrap": ">=<MIN-VERSION> <MAX-VERSION",
}
"lib": {
"entryFile": "src/public_api.ts",
"cssUrl": "inline",
"styleIncludePaths": [
"src/assets/styles",
"../../node_modules/bourbon/app/assets/stylesheets",
"../../node_modules/bourbon-neat/app/assets/stylesheets",
"../../node_modules/bootstrap/dist/css"
]
}
1) 你可以直接使用以下命令进行安装
npm install bootstrap
然后在你的Angular CLI中,你可以使用以下方式包含它
"styles": [
"node_modules/bootstrap/dist/css/bootstrap.min.css",
],
2) 你也可以使用ngx-bootstrap,它将帮助你处理许多输入组件
npm install ngx-bootstrap
您可以通过以下命令轻松安装普通的Bootstrap
npm i bootstrap
既然您正在使用Angular 6,那么您将需要一个angular.json文件和@angular-devkit/build-angular,而不是angular-cli.json。请使用以下命令安装devkit
npm i @angular-devkit/build-angular --save-dev
在“构建”下的“架构”部分中添加此行代码,并将样式引用放入“选项”中。我已经给出了以下示例。
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "public",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"preserveSymlinks": true,
"styles": [
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"node_modules/bootstrap/dist/css/bootstrap-theme.min.css"],
},
"configurations": {
"production": {
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": false,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": false,
"assets": [
"src/favicon.ico",
"src/assets"
],
},
"local": {
"assets": [
"src/favicon.ico"
]
}
}
}
我建议参考有关devkit和angular.json配置的文档。
我不知道这是否能回答你的问题,但首先你必须将Bootstrap添加到你的库对等依赖项中,之后,在使用该库的所有项目中,你都必须将Bootstrap样式包含在angular.json
的全局样式中。
接下来,您可以在库中使用模板中的Bootstrap类,并确保样式已应用。此外,如果您想要使用Bootstrap的mixin或变量,只需将所需的scss Bootstrap文件导入到库中组件的scss文件中,如下所示:
@import "~bootstrap/scss/bootstrap-grid";
@include media-breakpoint-up(sm) {
.some-class {
display: block;
}
}
有其他方法可以将样式包含到库中,但它们都需要拦截/扩展库构建过程。
ng-bootstrap
:您将获得一些方便的 Bootstrap 组件。 - Al-un