[英]Angular 6 import SCSS from node_modules with assets
I currently have a library which exports some SCSS with paths to fonts laying in a subfolder. 我目前有一个库,该库导出一些SCSS以及位于子文件夹中的字体的路径。
With the SCSS looking like the following in my font.scss in the node_modules folder 在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");
}
The file will be imported in the angular project in the main.scss file in the src-folder. 该文件将被导入src文件夹中main.scss文件的angular项目中。 The folder will be copied from the angular build to assets with the following setting 使用以下设置,文件夹将从角度构建复制到资产
{
"glob": "**/*",
"input": "nodemodules/library/fonts/",
"output": "/assets/fonts"
}
My question is how the $font-path should look like, or what i need to fix the problem. 我的问题是$ font-path应该是什么样子,或者我需要解决什么问题。 What i already tried and didn't work (always cant resolve the 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)
The problem is that CSS-Loader will always check the urls, when building the app it always tries to resolve the path to src/assets which obviously has no files in it, because they will only get copied to the destination folder (from the cli-config). 问题是CSS-Loader将始终检查URL,在构建应用程序时,它始终尝试解析到src / assets的路径,该路径显然没有文件,因为它们只会被复制到目标文件夹(从cli中) -config)。
Is there any solution? 有什么解决办法吗?
/src/assets/fonts/bold/xyz.eot (building the project works, but path is wrong on runtime) /src/assets/fonts/bold/xyz.eot(构建项目有效,但运行时路径错误)
When your app builds default all files will be in your dist folder. 当您的应用构建默认版本时,所有文件都将位于dist文件夹中。 It will look something like this 它看起来像这样
You won't have an src folder on root. 根目录上没有src文件夹。
Absolute path would be /assets/fonts/bold/xyz.eot
绝对路径为/assets/fonts/bold/xyz.eot
I think relative path would be ./nodemodules/library/fonts/bold/xyz.eot
我认为相对路径将是./nodemodules/library/fonts/bold/xyz.eot
It will be hard to give you a definitive answer, since folder structure varies from project to project, but it looks like you need to use --deploy-url
flag from Angular CLI. 由于文件夹的结构因项目而异,因此很难给出确切的答案,但是您似乎需要使用Angular CLI中的--deploy-url
标志。
Here's an excerpt from my project's package.json: 这是我项目的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"
}
In my case, all the fonts are mixed with main Angular CLI generated bundles in dist folder. 就我而言,所有字体都与dist文件夹中主要的Angular CLI生成的包混合在一起。 The styles.css
file is in there as well and I have no problems with broken paths. styles.css
文件也位于其中,路径没有问题。
Again, like I said, your folder structure may differ, but deploy-url
flag is a way to go. 同样,就像我说的那样,您的文件夹结构可能有所不同,但是deploy-url
标志是一种解决方法。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.