11

ライブラリとアプリで使用する nrwl-nx monorepo で共有スタイルとアセット (つまり、フォント) を設定しようとしています。

私の望む結果は、提供するライブラリの「テーマ」を持つことです

  1. 共有スタイル
  2. scss 変数とミックスイン
  3. フォント

他のライブラリやアプリ用。

1. と 2. については、ここで素晴らしい答えを見つけました: How to manage SCSS stylesheets across a monorepo with different libraries shared variables?

Tim Consolazio は、monorepo 全体で共有スタイルを処理する優れた (そして Nrwl にインスパイアされた) アプローチを提示します。libs/theme/scss/src/lib/theme.scss基本的な考え方は、にインポートされているエントリ ポイント scss を持つことですapps/myapp/src/styles.scss。これはうまくいっています。

私が苦労しているのは、共有スタイルで使用されるフォントを提供することでこれを機能させることです。つまりlibs/theme/scss/src/lib/fonts.scss、テーマライブラリ内のアセットフォルダーからフォントをインポートする.

プロジェクトの構造は

- apps
  - myapp
    - src
      - styles.scss (@import 'theme' from the lib)
- libs
  - theme
    - assets
      - src
        - lib
          - fonts
            - myfont.ttf
            ...
    - scss
      - src
        - lib
          - fonts.scss
          - theme.scss
          - variables.scss
          ...

目標は、アセットをthemesライブラリ内に配置することです。architect.build.assetsの配列に追加してみましたangular.json。しかし、フォント スタイルシートでフォントを参照するときに設定する正しいパスがわかりません。

@font-face {
  font-family: 'My-Font';
  src: url('./assets/fonts/myfont.eot');
  src: url('./assets/fonts/myfont.eot?#iefix') format('embedded-opentype'),
    url('./assets/fonts/myfont.woff2') format('woff2'),
    url('./assets/fonts/myfont.woff') format('woff'),
    url('./assets/fonts/myfont.ttf') format('truetype');
}

私は何が欠けていますか?

4

1 に答える 1