[英]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.