从 node_modules 到 angular-cli 的自定义字体

Posted

技术标签:

【中文标题】从 node_modules 到 angular-cli 的自定义字体【英文标题】:Custom font from node_modules into angular-cli 【发布时间】:2018-06-10 20:48:36 【问题描述】:

我查看了几个 *** 帖子和 github 问题,但找不到适合我的东西。

我有一个自定义字体,用于通过 npm 安装的图标。这些是我的文件夹a-iconsnode_modules中的文件:

a-icon.css
a-icon.eot,
a-icon.ttf,
a-icon.woff,
a-icon.svg

在我添加的主样式表中:

@import '~a-icons/a-icon';
@font-face 
  font-family: 'a-icon';
  src: url('../../../node_modules/a-icons/a-icon.eot');
  src:
    url('../../../node_modules/a-icons/a-icon.ttf') format('truetype'),
    url('../../../node_modules/a-icons/a-icon.woff') format('woff'),
    url('../../../node_modules/a-icons/a-icon.svg') format('svg');

@import '~a-icons/a-icon' 专门给我一个错误,说它找不到 .eot、.ttf、.woff、.svg

这是错误之一:

ERROR in ./node_modules/css-loader?"sourceMap":false,"importLoaders":1!./node_modules/postcss-loader/lib?"ident":"postcss","sourceMap":false!./node_modules/sass-loader/lib/loader.js?"sourceMap":false,"precision":8,"includePaths":[]!./src/assets/stylesheets/global-styles.scss
Module not found: Error: Can't resolve './a-icon.eot' in '/Users/rmadan/a-one/a-platform/src/assets/stylesheets'
resolve './a-icon.eot' in '/Users/rmadan/a-one/a-platform/src/assets/stylesheets'
  using description file: /Users/rmadan/a-one/a-platform/package.json (relative path: ./src/assets/stylesheets)
    Field 'browser' doesn't contain a valid alias configuration
  after using description file: /Users/rmadan/a-one/a-platform/package.json (relative path: ./src/assets/stylesheets)
    using description file: /Users/rmadan/a-one/a-platform/package.json (relative path: ./src/assets/stylesheets/a-icon.eot)
      no extension
        Field 'browser' doesn't contain a valid alias configuration
        /Users/rmadan/a-one/a-platform/src/assets/stylesheets/a-icon.eot doesn't exist
      .ts
        Field 'browser' doesn't contain a valid alias configuration
        /Users/rmadan/a-one/a-platform/src/assets/stylesheets/a-icon.eot.ts doesn't exist
      .js
        Field 'browser' doesn't contain a valid alias configuration
        /Users/rmadan/a-one/a-platform/src/assets/stylesheets/a-icon.eot.js doesn't exist
      as directory
        /Users/rmadan/a-one/a-platform/src/assets/stylesheets/a-icon.eot doesn't exist
[/Users/rmadan/a-one/a-platform/src/assets/stylesheets/a-icon.eot]
[/Users/rmadan/a-one/a-platform/src/assets/stylesheets/a-icon.eot.ts]
[/Users/rmadan/a-one/a-platform/src/assets/stylesheets/a-icon.eot.js]
[/Users/rmadan/a-one/a-platform/src/assets/stylesheets/a-icon.eot]
 @ ./node_modules/css-loader?"sourceMap":false,"importLoaders":1!./node_modules/postcss-loader/lib?"ident":"postcss","sourceMap":false!./node_modules/sass-loader/lib/loader.js?"sourceMap":false,"precision":8,"includePaths":[]!./src/assets/stylesheets/global-styles.scss 6:76081-76109
 @ ./src/assets/stylesheets/global-styles.scss
 @ multi ./src/assets/stylesheets/global-styles.scss ./node_modules/normalize.css/normalize.css

我使用的是 scss,但字体是原版 css。

我也尝试过@import '../../../node_modules/a-icons/a-icon.css'; 图标显示为正方形,我认为这是因为无法识别字体系列。所以我添加了@font-face,但它什么也没做。

我还尝试更改 angular-cli.json 以将其包含在资产和样式中:

"assets": [
    "assets",
    "assets/languages",
    "assets/stylesheets",
    "favicon.ico",
    "environments/environment.values.js",
    
      "glob": "a-icon.*",
      "input": "../node_modules/a-icons",
      "output": "./assets/a-icons"
    
"styles": [
    "assets/stylesheets/global-styles.scss",
    "../node_modules/normalize.css/normalize.css",
    "../node_modules/a-icons/a-icon.css"
    ]

这没有任何作用。

【问题讨论】:

【参考方案1】:

为什么要参考节点模块来获取图标?该字体与您的应用程序的主题相关,因此它应该位于您的资产文件夹中,然后只需在主样式表中添加:import the-name-font。

如果您需要从 node_modules 导入外部 css 文件,请将它们的链接添加到 angular cli 配置文件中以将它们导入 assets 文件夹,然后将它们从 assets 文件夹导入主样式表中

希望我的回答能帮到你

【讨论】:

我们将图标保存在单独的 git 存储库中,并将它们作为 npm 包,以便它们可以用于多个项目。您能否澄清“在 Angular cli 配置文件中添加它们的链接以将它们导入资产文件夹,然后将它们从资产文件夹导入您的主样式表”? 查看我的下一个答案了解更多详情【参考方案2】:

首先,我建议你在你的节点模块中创建一个单独的css文件“fonts.css”,在你的应用程序中包含一个css文件而不是重新定义字体并引用N个文件(woff2,eot ...等),例如: 你的 fonts.css:

@font-face 
  font-family: 'a-icon';
  src: url('a-icon.eot');
  src:
    url('a-icon.ttf') format('truetype'),
    url('a-icon.woff') format('woff'),
    url('a-icon.svg') format('svg');

其次,在您的 Angular 应用程序的 styles.css 中包含文件“fonts.css”,如下所示:

@import "~a-icons/fonts.css";

我有一个类似的解决方案可以正常工作,我的节点模块包含一个带有字体的主题。

【讨论】:

我试过了,它仍然显示为正方形。它仍然无法识别字体系列。是因为我将css文件导入scss吗?还是我需要在 angular-cli 配置中包含一些内容? 是的,您必须将包含 css 和字体文件的文件夹导入到 .angular-cli 中的资产中 您不必将其实际导入到 Angular cli 配置中的资产中。您也可以执行 @import "~a-icons/fonts.css"; 或将其包含在 angular cli 配置中的 styles 下。 在 angular-cli 中,你必须告诉 angular 编译器有一个文件夹,其中包含你的 eot woff ... 节点模块中的文件,以便在编译时导入 在你的 .angular-cli.json 中像这样:"assets": [../node_modules/a-icons"]

以上是关于从 node_modules 到 angular-cli 的自定义字体的主要内容,如果未能解决你的问题,请参考以下文章

Angular 6 从带有资产的 node_modules 导入 SCSS

使用 Angular 7 构建的 Webpack 4 在尝试访问 node_modules 时会出现 sass-loader 问题

将 Angular 2 node_modules 文件编译成一个文件

NPM:我们可以将 node_modules 存储到一个公共文件夹中并在 Angular 项目中使用它吗?

来自 node_modules 的 Angular 单元测试 spyOn 类

从 Angular 4 升级到 7 导致问题