首页信息安全在Ngrx-nxMonorepo中管理共享样式和资产

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

admin 05-28 05:00 242次浏览

我正在尝试在nrwl-nx monorepo中设置共享样式和资产(即字体),以便在库和应用程序中使用。

我想要的结果是拥有一个图书馆“主题”

    共享样式

    scss变量和混合

    的字体

用于其他库和应用程序。

对于1.和2.,我在这里找到了一个很好的答案:如何在具有不同库共享变量的monorepo中管理SCSS样式表?

蒂姆·康索拉齐奥(Tim Consolazio)提出了一种很好的方法(受Nrwl启发),可以处理跨monorepo的共享样式。基本思想是在libs/theme/scss/src/lib/theme.scss其中导入一个入口点scss apps/myapp/src/styles.scss。一切正常。

不过,我很难过的是要使它能够提供共享样式中使用的字体,例如,我有一个libs/theme/scss/src/lib/fonts.scss从主题库中的assets文件夹导入字体的方法。

项目结构是

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

我想念什么?

1> derdaani..:

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

.
在Ngrx-nxMonorepo中管理共享样式和资产
Spring5.2.x 源码本地环境搭建的方法步骤 JAVA异常处理捕获与抛出原理解析
相关内容