在 Ngrx-nx Monorepo 中管理共享样式和资产

Posted 2023-03-23

【中文标题】在 Ngrx-nx Monorepo 中管理共享样式和资产

【英文标题】：Managing shared styles and assets in Ngrx-nx Monorepo

【发布时间】：2019-12-06 04:13:10

【问题描述】：

我正在尝试在 nrwl-nx monorepo 中设置共享样式和资产（即字体）以用于库和应用程序。

我想要的结果是拥有一个提供的库“主题”

共享样式 scss 变量和 mixins 字体

用于其他库和应用程序。

对于 1. 和 2. 我在这里找到了一个很好的答案：How to manage SCSS stylesheets across a monorepo with different libraries sharing variables?

Tim Consolazio 提出了一种很好的（并且受 Nrwl 启发）方法来处理跨 monorepo 的共享样式。基本思想是在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 库中拥有资产。我尝试添加到angular.json 中的architect.build.assets 数组。但是在引用字体样式表中的字体时，我无法弄清楚要设置的正确路径：

@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');

我错过了什么？

【参考方案1】：

因此，在经历了很多头痛之后，我找到了一个相当简单的解决方案，正如Medium article 中所建议的那样，稍作调整即可使其正常工作。

项目结构：

- libs
  - theme
    - assets
        - fonts
            - myfont.ttf
            ...

关键是将共享资产的 glob 添加到您的angular.json 中的每个应用程序，例如在

projects.my-project-1.architect.build.options.assets projects.my-project-2.architect.build.options.assets ...

    "glob": "**/*",
    "input": "libs/theme/assets/",
    "output": "/assets/"

见https://github.com/angular/angular-cli/blob/master/docs/documentation/stories/asset-configuration.md#project-assets

另外，我不得不将scss中字体文件的导入路径改为绝对路径：

@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');

对我有用，但我很乐意了解更优雅的解决方案 - 尤其是需要为每个新应用复制粘贴资产 glob 的问题困扰着我。

【讨论】：

您是否找到了更好的解决方案，无需将资产复制到新应用中？