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

Question

我查看了几个 Whosebug 帖子和 github 问题，但找不到适合我的内容。

我有一种自定义字体，用于通过 npm 安装的图标。这些是 node_modules 中我的文件夹 a-icons 中的文件：

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"
    ]

这没有任何作用。

Answer 1

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

如果您需要从 node_modules 导入外部 css 文件，请在 angular cli 配置文件中添加它们的链接将它们导入资产文件夹，然后将它们导入您的主目录资产文件夹中的样式表

希望我的回复能帮到您

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

其次，将文件 "fonts.css" 包含在 angular 应用程序的 styles.css 中，如下所示：

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

我有一个类似的解决方案，效果很好，我的节点模块包含一个带字体的主题。

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

Custom font from node_modules into angular-cli

css

fonts

node-modules

angular-cli

angular