![](/img/trans.png)
[英]~ sign to import scss is searching inside node_modules in Angular 6
[英]Angular 6 import SCSS from node_modules with assets
我目前有一个库,该库导出一些SCSS以及位于子文件夹中的字体的路径。
在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)。
有什么解决办法吗?
/src/assets/fonts/bold/xyz.eot(构建项目有效,但运行时路径错误)
当您的应用构建默认版本时,所有文件都将位于dist文件夹中。 它看起来像这样
根目录上没有src文件夹。
绝对路径为/assets/fonts/bold/xyz.eot
我认为相对路径将是./nodemodules/library/fonts/bold/xyz.eot
由于文件夹的结构因项目而异,因此很难给出确切的答案,但是您似乎需要使用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
标志是一种解决方法。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.