Angular 6從具有資產的node_modules導入SCSS

Question

我目前有一個庫，該庫導出一些SCSS以及位於子文件夾中的字體的路徑。

• nodemodules /庫/字體/font.scss
• 字體文件，例如在nodemodules / library / fonts / bold / xyz.eot中

在node_modules文件夾中我的font.scss中的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標志是一種解決方法。