从node_modules导入自定义字体到angular-cli

Question

从node_modules导入自定义字体到angular-cli

6

我已经查看了几篇stackoverflow帖子和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"
    ]

这个并没有任何作用。

- Riva Madan

2个回答

0

你为什么要引用一个节点模块来获取图标？字体与应用程序的主题相关，因此应该在您的资产文件夹中，然后简单地添加：在您的主样式表中导入字体名称。如果您需要从node_modules导入外部css文件，请在angular cli配置文件中添加它们的链接以将它们导入到资产文件夹中，然后从资产文件夹导入到您的主样式表中。希望我的回答能帮到你。

- mth khaled

我们将图标保存在一个独立的git仓库中，并将它们作为npm包进行管理，以便它们可以与多个项目一起使用。请问“在angular cli配置文件中添加它们的链接，以便将它们导入到assets文件夹中并从assets文件夹中的主样式表中导入它们”这句话是否可以进一步解释？ - Riva Madan

请查看我下一个回答以获取更多详细信息。 - mth khaled

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- mth khaled · Accepted Answer

首先，我建议您在您的节点模块中创建一个名为“fonts.css”的单个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";

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