web-dev-qa-db-ja.com

Angular 6つのライブラリ共有スタイルシート

Index.scssをセットアップし、変数、ミックスインなどのグローバルスタイルシートをangular 6ライブラリにインポートするにはどうすればよいですか？

Angular CLIはルートコンポーネントとコンポーネントscssでlibを生成しますが、ルートコンポーネントに追加またはインポートされたスタイルは子コンポーネントでは使用できません。これはデフォルトでスタイルをカプセル化するのに理にかなっていますが、まだこれを設定する方法に関する情報や例を見つけることができません。

"styles": [...]でこれに使用できるangular.json "projectType": "application"パスは、"projectType": "library"でも機能しないようです。

よろしくお願いします！

更新：私のプロジェクトはangular cli v6.0.5、次のガイドに従って開始されました： https://medium.com/@tomsu/how-to-build-a-library -for-angular-apps-4f9b38b0ed11

TL;ガイドのDR：

ng new my-app --style=scss
ng generate library my-library --prefix ml

これはファイル構造ですangular 6は以下を生成します：

    my-app
      projects/
        my-library/
          src/
            lib/
              shared/..
              widgets/..
              my-library.component.ts
              my-library.module.ts
            sass/
              _variables.scss
              styles.scss // <<< This is where I want to `@import 'variables';`, and for it to be available in all the components of the "my-library" project.
            public_api.ts
      src/
        app/
          app.module.ts // << imports projects/my-library/lib/my-library.module as "my-library".
        main.ts
        index.scss
        index.html
      README.md

パッケージバージョン：

    Angular CLI: 6.0.5
    Node: 10.2.1
    OS: darwin x64
    Angular: 6.0.3
    ... animations, common, compiler, compiler-cli, core, forms
    ... http, language-service, platform-browser
    ... platform-browser-dynamic, router

    Package                            Version
    ------------------------------------------------------------
    @angular-devkit/architect          0.6.5
    @angular-devkit/build-angular      0.6.5
    @angular-devkit/build-ng-packagr   0.6.5
    @angular-devkit/build-optimizer    0.6.5
    @angular-devkit/core               0.6.5
    @angular-devkit/schematics         0.6.5
    @angular/cli                       6.0.5
    @ngtools/json-schema               1.1.0
    @ngtools/webpack                   6.0.5
    @schematics/angular                0.6.5
    @schematics/update                 0.6.5
    ng-packagr                         3.0.0
    rxjs                               6.2.0
    TypeScript                         2.7.2
    webpack                            4.8.3
angularangular-clilibrariesangular6angular-cli-v6
22
xaunlopez

グローバルスタイルについては、 この質問 で回答しました。

ミックスインと変数についても回避策があります。

  1. ライブラリのルートフォルダーにindex.scssファイルを作成します。 Angularのこのガイド に従うと、パスはmy-project/projects/my-library/index.scssになります。これは、package.jsonがあるフォルダーでもあります。

したがって、index.scssは変数とミックスインを含むファイルになります

$grey: #222;
@mixin mymixin {
    background: #222;
}
  1. これをimportを使用してライブラリscssファイルに含めます
@import '../../index.scss';

または、コンポーネントのscssファイルの相対パス。

  1. このファイルをアプリプロジェクトに含めるには、ビルド後にdistディレクトリにコピーします。これを行うには、angularライブラリのプロジェクトのpackage.jsonファイル（ライブラリではなく））を編集します。
{
    "name": "my-project",
    "version": "1.0.0",
    "scripts": {
        "ng": "ng",
        "start": "ng serve",
        "build": "ng build && npm run copyScss",
        "test": "ng test",
        "lint": "ng lint",
        "e2e": "ng e2e",
        "copyScss": "xcopy \"projects\my-library\index.scss\" \"dist\\my-library\\\""
    },

    ...
}

  1. さて、非常に重要なのは、ng buildを使用してライブラリを構築しないで、代わりにnpm run buildを使用することです。これにより、コピーコマンドが自動的に実行されます。これで、index.scssファイルがライブラリとともにmy-project/distフォルダーにエクスポートされます。

  2. アプリプロジェクトのscssファイルにindex.scssを含めます

// ~ stands for the node_modules folder
@import '~my-library/index.scss';

これで、ライブラリをインストールしたすべてのプロジェクトにすべてのライブラリミックスインができました。

乾杯！

[〜＃〜] ps [〜＃〜]回避策は最もエレガントなソリューションではありませんが、他に何も機能しない場合は回避します！

2
Neil Patrao

コンポーネントメタデータの一部として、コンポーネントのカプセル化レベルをnoneに設定しようとしましたか？このような：

@Component({
  selector: 'app-component',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
  encapsulation: ViewEncapsulation.None
})

ViewEncapsulationレベルは次のとおりです。

  • ViewEncapsulation.Emulated：デフォルトでは、Angular Shadow DOMをエミュレートします。
  • ViewEncapsulation.Native：ブラウザ独自のShadow DOMを使用します。
  • ViewEncapsulation.None：スタイルはグローバルです

ViewEncapsulationのAngular Docs をチェックして、 ブログの投稿 を書きました。

0
JeffryHouser

実行ng initは、プロジェクトをAngular CLIプロジェクトとして初期化します。

編集：悪い、CLIからinitを削除したようです。あなたが試すことができます ng new --src

一部のファイルが上書きされる可能性があるため、プロジェクトのコピーでこれを試してください。

0
Arno4Jackie

カプセル化オプションは存在しますが、グローバルスタイルはスタイルタグで出力され、プロジェクト全体にカスケードできるという事実を人々が見逃しているのではないかと思います。

私のセットアップは次のとおりです。

enter image description here

  1. 私のグローバルスタイル：styles.scssはスタイルタグで出力されます。ルールは、一致するすべてのクラスと要素を期待どおりにターゲットにします。コンポーネント内でも。

  2. コンポーネントのスタイルはカプセル化されています。それが彼らの価値の支柱です。グローバルを上書きし、コンポーネントファミリでコンポーネント固有のスタイルを保持します。

  3. @includes（variables.scss、mixins.scssなど）は、必要に応じてコンポーネント.scssファイルの先頭に明示的に含まれます。

@import '../../../../scss/includes/variables';

他に何が必要でしょうか？

0
Ben Racicot