Question

我目前有一个库，该库可以导出一些SCSS以及位于子文件夹中的字体的路径。

nodemodules / library / fonts / font.scss
字体文件，例如在nodemodules / library / fonts / bold / xyz.eot

在我的font.scss的node_modules文件夹中，SCSS如下所示

@font-face {
   font-family: "Daimler";
   font-weight: "normal";
   font-style: "italic";
   src: url($font-path + '.eot') format("embedded-opentype"),
   url($font-path + '.ttf') format("ttf");
}

该文件将被导入src文件夹中main.scss文件的angular项目中。使用以下设置，文件夹将从角度构建复制到资产中

{
   "glob": "**/*",
   "input": "nodemodules/library/fonts/",
   "output": "/assets/fonts"
}

我的问题是$ font-path应该是什么样子，或者我需要解决什么问题。我已经尝试过但无法正常工作的东西（总是无法解析路径）：

./assets/fonts/bold/xyz.eot (can't resolve because relativ path is wrong from main.scss, but should be correct since that will be the destination the files will be copied to from the angular build)

/src/assets/fonts/bold/xyz.eot (building the project works, but path is wrong on runtime)

问题是CSS-Loader将始终检查URL，在构建应用程序时，它总是尝试解析src / assets的路径，该路径显然没有文件，因为它们只会被复制到目标文件夹（来自cli-config）。

有什么解决办法吗？

Answer 1

/src/assets/fonts/bold/xyz.eot（构建项目有效，但是路径在运行时是错误的）

当您的应用构建默认时，所有文件都将位于dist文件夹中。看起来像这样

资产
index.html
一堆js文件和其他

您在根目录上将没有src文件夹。

绝对路径为/assets/fonts/bold/xyz.eot

我认为相对路径为./nodemodules/library/fonts/bold/xyz.eot

Answer 2

由于文件夹的结构因项目而异，因此很难给您一个明确的答案，但是您似乎需要使用Angular CLI中的--deploy-url标志。

这是我项目的package.json的摘录：

"scripts": {
  "ng": "ng",
  "prod": "ng build --deploy-url /assets/analytics/dist/",
  "dev": "ng build --deploy-url /assets/analytics/dist/ --watch",
  "test": "ng test"
}

就我而言，所有字体都与dist文件夹中主要的Angular CLI生成的包混合在一起。 styles.css文件也位于其中，路径没有问题。

同样，就像我说的那样，您的文件夹结构可能有所不同，但是deploy-url标志是一种解决方法。

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

2 个答案: