web-dev-qa-db-ja.com

グローバルスタイルをangular 6/7ライブラリに追加する方法

angularアプリと同じ方法でグローバルスタイルを追加しようとしましたが、まったく機能しません。

私のライブラリの名前はexample-libなので、styles.cssを/projects/example-lib/に追加しました。メインangular.jsonファイルにスタイルを追加しました：

...
"example-lib": {
  "root": "projects/example-lib",
  "sourceRoot": "projects/example-lib/src",
  "projectType": "library",
  "prefix": "ngx",
  "architect": {
    "build": {
      "builder": "@angular-devkit/build-ng-packagr:build",
      "options": {
        "tsConfig": "projects/example-lib/tsconfig.lib.json",
        "project": "projects/example-lib/ng-package.json",
        "styles": [
          "projects/example-lib/styles.css" <!-- HERE 
        ],
      },
...

しかし、コマンドを使用してライブラリをビルドしようとしたとき：

ng build example-lib

エラーが発生しました：

Schema validation failed with the following errors:
  Data path "" should NOT have additional properties(styles)

別のライブラリにグローバルスタイルを追加するもう1つの方法だと思います。誰でも私を助けることができますか？

cssangularstylesangular-library
20
Jaroslaw K.

これに対する回避策があります。ビューのカプセル化なしでライブラリのルートコンポーネントを作成するだけで、そのスタイルはすべてグローバルになります。

my-library.component.ts

import { Component, OnInit, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'lib-my-library',
  templateUrl: './my-library.component.html',
  styleUrls: ['./my-library.component.scss'],
  encapsulation: ViewEncapsulation.None
})
export class MyLibraryComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

my-library.component.html

<!-- html content -->

my-library.component.scss

@import './styles/core.scss';

これで、my-library.component.scssおよびcore.scssはグローバル

styles/core.scss

body {
    background: #333;
}

core.scssはオプションで、ルートファイルをクリーンに保ちたいだけです。

Update：ミックスインと変数も必要な場合は、 this answer に従ってください。

7
Neil Patrao

新しいAngular 6個のライブラリでのcssのコンパイル ：

  1. cssをバンドルするには、ライブラリにいくつかのdevDependenciesをインストールします。

    • ng-packagr
    • scss-bundle
    • ts-node

  2. css-bundle.ts を作成します

  3. バンドルしたいすべてのcssを実際に含み、インポートするライブラリの/ srcディレクトリ内に_theme.scssを追加します。

  4. css-bundle.ts を実行するpostbuild npmスクリプトを追加します。

  5. アプリケーションのangular.jsonのstylesタグに含めます
2
yazantahhan

この問題の解決策 から

cpxとscss-bundleをpackage.jsonへのDev依存関係としてインストールします。次に、package.jsonの「scripts」プロパティに次のエントリを追加します。

"scripts": {
  ...
  "build-mylib": "ng build mylib && npm run build-mylib-styles && npm run cp-mylib-assets",
  "build-mylib-styles": "cpx \"./projects/mylib/src/lib/style/**/*\" \"./dist/mylib/style\" && scss-bundle -e ./projects/mylib/src/lib/style/_style.scss -d ./dist/mylib/style/_styles.scss",
  "cp-mylib-assets": "cpx \"./src/assets/**/*\" \"./dist/mylib/assets\"",
  ...
}

「mylib」を実際のライブラリ名に置き換えてから、ターミナルbuild-mylibで実行します。それはあなたのscss aseetsをあなたのdistフォルダにコンパイルします。

実際のAngularプロジェクトでこのグローバルスタイルを使用すると、プロジェクト設定内のangular.jsonファイルにインポートするだけです：

"styles": [
  "src/styles.scss",
  "dist/my-shiny-library/_theme.scss"
],

（プロジェクトが同じワークスペースにある場合はdistを使用し、インポートされたライブラリーの場合はnode_moduledを使用します）

1
Daniel Llano