web-dev-qa-db-ja.com

Angular 6 Library using bootstrap

angular 6ライブラリ機能を使用してangularプロジェクトにangularライブラリを作成しています https://github.com/angular/angular-cli/wiki/stories-create-library

これを介していくつかの再利用可能なコンポーネントを作成しています。これは、プロジェクト全体で再利用できます。名前コンポーネント、電話番号コンポーネントなどのようなものです。コンポーネントを作成しましたが、bootstrapを含める方法がわかりません図書館プロジェクト？ライブラリを使用するプロジェクトはbootstrapをインストールします...どうやってこれにアプローチするのですか？

これはbootstrapをAngularアプリケーションに追加する方法ではありません。これは異なるため、Angularライブラリに追加する方法について意見を求めています...ライブラリと一緒にパッケージ化するか、それとも相互依存関係にする必要がありますか？ピア依存関係の場合、どうすればいいですか？

ライブラリプロジェクトでもbootstrapのミックスインをいくつか使用する必要があります。ライブラリプロジェクトでそれらを取得するにはどうすればよいですか？

angularbootstrap-4
12
Janier

それがあなたの質問に答えるかどうかはわかりませんが、最初にbootstrapをライブラリピアの依存関係に追加する必要があります。その後、そのライブラリを使用するすべてのプロジェクトで、bootstrapスタイルを含める必要があります。 _angular.json_のグローバルスタイル。

その後、ライブラリのテンプレートからbootstrapクラスを使用でき、スタイルが確実に適用されるようになります。また、ブートストラップからミックスインまたは変数を使用する場合は、次のように、必要なscss bootstrapファイルをライブラリのコンポーネントのscssファイルにインポートできます。

_@import "~bootstrap/scss/bootstrap-grid";

@include media-breakpoint-up(sm) {
    .some-class {
      display: block;
    }
}
_

ビルド中に、これらのインポートされたすべてのscssファイルがコンパイルされ、ライブラリの出力ファイルにビルドされます。

ライブラリにスタイルを含める方法は他にもありますが、すべての方法でライブラリビルドプロセスのインターセプト/拡張が必要です。

0
Amir Arbabian

以下のコマンドで通常のbootstrapをインストールできます

npm i bootstrap

次に、Angular 6を使用しているので、angular-cli.jsonではなく、@ angular-devkit/build-angularにangular.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設定 に関する詳細については、ドキュメントを参照することをお勧めします。

0
Ben Brown

Ng-packagrを使用している場合は、以下のプロセスを使用できます。

以下に示すように、ng-package.jsonのstyleIncludePathsにスタイルを追加しました。

"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"
    ]
  }
0
Eeshwar Ankathi