Angular 6 从带有资产的 node_modules 导入 SCSS
Posted
技术标签:
【中文标题】Angular 6 从带有资产的 node_modules 导入 SCSS【英文标题】:Angular 6 import SCSS from node_modules with assets 【发布时间】:2019-01-14 07:10:21 【问题描述】:我目前有一个库,它可以导出一些 SCSS,其中包含位于子文件夹中的字体路径。
nodemodules/library/fonts/font.scss 字体文件,例如在 nodemodules/library/fonts/bold/xyz.eotSCSS 在我的 node_modules 文件夹中的 font.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 项目中。该文件夹将从 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)。
有什么解决办法吗?
【问题讨论】:
【参考方案1】:/src/assets/fonts/bold/xyz.eot(构建项目有效,但路径 运行时错误)
当您的应用默认构建时,所有文件都将位于您的 dist 文件夹中。 它看起来像这样
资产 index.html 一堆js文件和其他根目录下不会有 src 文件夹。
绝对路径是/assets/fonts/bold/xyz.eot
我认为相对路径是./nodemodules/library/fonts/bold/xyz.eot
【讨论】:
是的,这将是开发时的正确路径,但在运行时没有更多的 node_modules 文件夹,因此无法找到文件。 如果我没记错的话,Angular cli 会在您构建生产应用程序时转换路径。 应该尝试/assets/fonts/bold/xyz.eot
--> 有效。也许 TS 导入路径,但我不认为 SCSS 路径,它们总是必须相对于 dist 文件夹。刚刚犯了一个菜鸟错误,谢谢你的提示:)【参考方案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的主要内容,如果未能解决你的问题,请参考以下文章
Angular 6 - 本地文件(js,css,img)添加到运行时未见的资产。如何一次引用所有文件?
Angular 6获取带有httpclient问题的响应标头