Question

我正在尝试在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库中。我尝试添加到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');
}

我想念什么？

Answer 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');
}

为我工作，但是我很乐意了解更优雅的解决方案-尤其是对于每个新应用都必须复制粘贴资产的问题困扰着我。

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

1 个答案: