29

Nrwlを介して設定された角度のある monorepo があり、SASS を使用するAngular Material の themingを使用しています。

SCSS ソース ファイルをプロジェクト レベルでインポートして、テーマ設定のデフォルトの色変数をオーバーライドしたいと考えています。

私が直面している問題は、モノレポ内の他のアプリ/ライブラリ、およびこのモノレポの外部のプロジェクトに SCSS ソース ファイルをインポートしたいということです。

インポートは次のように記述できます。

@import "../other-lib/style.scss";

...これは、モノレポ内のすべてに対して機能します。

または、次のように書くこともできます。

@import "~@my-organization/other-lib/style.scss";

...私のモノレポ、AFAIK内では動作しません。

両方のコンテキストで機能させるにはどうすればよいですか?

下図のような配置になっています。

ここに画像の説明を入力

4

1 に答える 1

19

ここに何かあると思います。これは、NRWL チームと何度かやり取りした後に採用したソリューションです。

最初に angular CLI を使用してプロジェクトを作成し、次のように拡張機能を追加して、NX ワークスペースを作成します。

  • ng new myproject (cd で myproject ルートに移動)
  • ng add @nrwl/workspace

さらに、本日 (2019 年 7 月 10 日) の時点で、ワークスペースが既に angular タイプであり、@nrwl インストールがそれを認識して @nrwl/angular をインストールするにもかかわらず、デフォルトを正しく構成しないというバグを報告しました。これは、"@nrwl/angular:" をコマンドの前に追加しないと "ng" コマンドが実行されないことを意味します (例: "ng @nrwl/angular:g module mymod")。そのため、インストールを実行する必要があります (scss と任意の e2e ランナーを選択します):

  • ng add @nrwl/angular

@nrwl/angular が既にインストールされていることを通知しますが、構成ファイルを変更して angular をデフォルトの回路図コレクションとして認識し、ng コマンドが再び期待どおりに実行されます。

ワークスペースは以上です。次に、lib を作成します。

  • ng g lib scss --directory=stylesheets

これにより、libs->stylesheets に scss という名前のライブラリが配置されます。そのライブラリの「lib」ディレクトリに、すべての scss ファイルをダンプします。その lib ディレクトリに「variables.scss」というファイルを置いたとします。

これが行うことはいくつかあります:

  • ライブラリを作成すると、「パス」エントリがリポジトリ構成に追加されます。これにより、長い相対インポートの代わりにそのパスを使用して、ライブラリ内のアセットを使用できます。このエントリを追加して、ライブラリ ラッパーを使用せずに scss ファイルを他の scss ファイルにインポートしようとしても機能しないことに注意してください。明らかに、そのパスを解決するにはそのライブラリが必要です。

見ると、「パス」エントリが次のようになっていることがわかります。

「@nameofrepo-nameoflib」

ライブラリの scss アセットを angular.json で使用するには、使用するすべてのプロジェクトの「build.options」セクションに以下のフラグメントを手動で追加する必要があります (理想的ではありませんが、あります)。の。

そうです、10 個のプロジェクトがある場合、それぞれに angular.json にプロジェクト エントリがあり、それぞれに build.options ブロックがあります (通常、少なくとも私のバニラ インストールでは "scripts []" で終わります)。これらのオプション セクションのそれぞれにこれを追加する必要があります (この情報は公開されていますが、確認したかったのですが、これは NRWL チームから直接提供されたものです)。

"stylePreprocessorOptions": {
    "includePaths": ["libs/stylesheets/scss/src/lib"]
},
"extractCss": true

ここで、アプリを作成し、上記の構成を angular.json のエントリに追加したとします。

ng g アプリ myapp

そして、このアプリ内で機能モジュールとコンポーネントを作成しました。

(apps/myapp/src に cd)

ng モジュール myfeature ng g コンポーネント myfeature

これにより、モジュールとコンポーネントのフォルダーとアセットなどが作成されます。

注: 上記と同じ日付の時点で、プロジェクトで .scss が選択されている場合でも、この方法でコンポーネントを直接作成すると .css ファイルが作成されるという問題があります。そのファイルの名前を変更し、コンポーネントのポインタをそのファイルに変更してください。

myfeature.component.scss 内で、次のように lib から "variables.scss" をインポートします。

@import "変数"

「~」がないことに注意してください (これは node_modules に解決されます)。また、「lib」ディレクトリ (utils など) にサブディレクトリがある場合は、期待どおりにパスを指定します。

@import "utils/somefile"

ここでも... angular.json の各プロジェクト エントリに示されているように、プリプロセッサ オプションを構成する必要があります。

別の問題:これらのパスは、IDE で解決されるように見える場合と、解決されないように見える場合があります。奇妙なことに、そうする人もいればそうでない人もいるようです。ここでのパターンは正確にはわかりませんが、IDE は技術的にエラーがない場合にエラーを表示する可能性があることに注意してください。

これは私のプロジェクトではうまく機能しています。

于 2019-07-10T12:41:14.700 に答える