Managing shared styles and assets in Ngrx-nx Monorepo

Question

I am trying to set up shared styles and assets (i.e. fonts) in a nrwl-nx monorepo for use in libraries and apps.

My desired outcome is having a library 'theme' that provides

1. shared styles
2. scss variables and mixins
3. fonts

for other libs and apps.

For 1. and 2. I found a great answer here: How to manage SCSS stylesheets across a monorepo with different libraries sharing variables?

Tim Consolazio presents a nice (and Nrwl-inspired) approach of handling shared styles across a monorepo. The basic idea is having an entry point scss in libs/theme/scss/src/lib/theme.scss that is being imported in apps/myapp/src/styles.scss. This is working fine.

What I am having a hard time though is getting this to work with providing fonts to be used in the shared styles, i.e. I have a libs/theme/scss/src/lib/fonts.scss that imports fonts from the assets folder within the themes lib.

The project structure is

- 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
          ...

The goal is to have the assets within the themes library. I tried adding to the architect.build.assets array in angular.json. But I can't figure out the correct path to set when referencing the fonts in the fonts stylesheet:

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

What am I missing?

Eurhythmic

Answer 1

So after a lot of headaches I came to a rather simple solution as suggested in this Medium article with slight tweaks to get it working.

The project structure:

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

The key is to add the glob for the shared assets to each app in your angular.json, e.g. in

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

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

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

Also, I had to change the import paths of the font files in scss to absolute paths:

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

Works for me, but I'd be happy to learn about more elegant solutions - especially the need to copy-paste the assets glob for every new app bothers me.

Eurhythmic

Have you found a better solution, that you dont need to copy your assets to a new app? – Biped