[英]Angular build can't find installed Font-Awesome node_module
每当我使用ng build --prod
构建项目时, ng build --prod
收到以下错误:
ERROR in ./src/styles.scss
Module build failed:
ModuleBuildError: Module build failed:
Error: Can't resolve '~font-awesome/css/font-awesome.css' in '/app/src'
styles.css
使用@import "~font-awesome/css/font-awesome.css";
。 我已经验证了路径,并且模块已正确安装在node_modules/font-awesome
。
我也尝试导入带和不带文件结尾的scss
版本。 当我删除@import
语句时,即使我对同一文件中的其他node_modules使用其他导入,也可以正常工作-因此,这似乎只是字体棒的软件包的问题...
另外,我对我的node_modules/font-awesome/css/font-awesome.css
容器进行了SSH检查,以检查是否存在node_modules/font-awesome/css/font-awesome.css
。
有想法吗?
适用于我(此行在我的主app.css中)
@import "node_modules/font-awesome/scss/font-awesome";
您需要在.angular-cli.json
文件中添加该.angular-cli.json
在apps
下添加styles
,如下所示:
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"project": {
"name": "MyProject",
"ejected": false
},
"apps": [
{
"root": "src",
"outDir": "dist",
"assets": [
"assets",
"manifest.json",
{
"glob": "**/*",
"input": "../node_modules/leaflet/dist/images",
"output": "./assets/",
"allowOutsideOutDir": false
}
],
"index": "index.html",
"main": "main.ts",
"polyfills": "polyfills.ts",
"test": "test.ts",
"tsconfig": "tsconfig.app.json",
"testTsconfig": "tsconfig.spec.json",
"prefix": "app",
"serviceWorker": true,
"styles": [
"assets/sass/global/loading.css",
"../node_modules/font-awesome/css/font-awesome.min.css", <===================
"styles.scss"
],
"scripts": [],
"environmentSource": "environments/environment.ts",
"environments": {
"dev": "environments/environment.ts",
"demo": "environments/environment.demo.ts",
"prod": "environments/environment.prod.ts",
"qa": "environments/environment.qa.ts",
"e2e": "environments/environment.e2e.ts"
}
}
],
"e2e": {
"protractor": {
"config": "./protractor.conf.js"
}
},
"lint": [
{
"project": "src/tsconfig.app.json",
"exclude": "**/node_modules/**"
},
{
"project": "src/tsconfig.spec.json"
},
{
"project": "e2e/tsconfig.e2e.json"
}
],
"test": {
"karma": {
"config": "./karma.conf.js"
}
},
"defaults": {
"styleExt": "scss",
"component": {
}
}
}
我不确定为什么文件的CSS版本永远无法工作,但是我能够在angular-cli上找到文档,这给了我一些如何工作的提示。
1)导入SCSS版本而不是CSS版本。
@import "~font-awesome/scss/font-awesome.scss";
2)将字体路径定义为SCSS变量。
$fa-font-path: "~font-awesome/fonts";
请注意,必须在@import
语句之前定义SCSS var。
奇怪的是,错误随机发生。 对于一个开发人员来说,一切工作都很好,但是当将存储库拉到另一台计算机时,就引入了这个问题。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.