2015-08-31 19 views
9

Attualmente sto lavorando a un progetto che era già stato avviato utilizzando yeoman.Grunt wiredep non injecting font-awesome

Per qualche motivo, quando eseguo grunt-wiredep, tutte le dipendenze vengono iniettate correttamente nel mio index.html ad eccezione di font-awesome.

Ecco la mia bower.json di file:

{ 
    "name": "watermelon", 
    "version": "0.0.0", 
    "dependencies": { 
    "angular": "^1.3.0", 
    "angular-animate": "^1.3.0", 
    "angular-bootstrap": "~0.13.3", 
    "angular-cookies": "^1.3.0", 
    "angular-google-maps-native": "~2.0.0", 
    "angular-mocks": "~1.3.0", 
    "angular-resource": "^1.3.0", 
    "angular-route": "^1.3.0", 
    "angular-sanitize": "^1.3.0", 
    "angular-scenario": "~1.3.0", 
    "angular-touch": "^1.3.0", 
    "angular-ui-router": "~0.2.15", 
    "bootstrap": "^3.2.0", 
    "bootstrap-switch": "~3.3.2", 
    "eonasdan-bootstrap-datetimepicker": "~4.15.35", 
    "es5-shim": "^4.0.0", 
    "font-awesome": "~4.4.0", 
    "json3": "^3.3.0", 
    "moment": "~2.10.6", 
    "ng-tags-input": "3.0.0", 
    "requirejs": "latest", 
    "requirejs-domready": "latest", 
    "stacktrace-js": "~0.6.4", 
    "underscore": "~1.8.3" 
    }, 
    "appPath": "." 
} 

e un link per Gruntfile.js: http://pastebin.com/xxZwAYRW

Quando eseguo solo grunt-wiredep queste dipendenze css vengono iniettate:

<!-- bower:css --> 
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" /> 
<link rel="stylesheet" href="bower_components/bootstrap-switch/dist/css/bootstrap3/bootstrap-switch.css" /> 
<link rel="stylesheet" href="bower_components/eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.min.css" /> 
<link rel="stylesheet" href="bower_components/ng-tags-input/ng-tags-input.min.css" /> 
<!-- endbower --> 

risposta

19

Questo problema ha rotto con il latest(4.4.0) commit to FontAwesome.

La correzione è abbastanza semplice. È necessario impostare un override (o forse usare meno, ma non lo coprirò).

{ 
    "name": "myProject", 
    "version": "0.0.0", 
    "dependencies": { 
    "font-awesome": ">=4.4.0", 
    }, 
    "overrides":{ 
    "font-awesome": { 
    "main": [ 
     "css/font-awesome.css" 
    ] 
    } 
    } 
} 

O (perché fontawesome/fontawesome ha entrambi i nomi registrati)

{ 
    "name": "myProject", 
    "version": "0.0.0", 
    "dependencies": { 
    "fontawesome": ">=4.4.0", 
    }, 
    "overrides":{ 
    "fontawesome": { 
    "main": [ 
     "css/font-awesome.css" 
    ] 
    } 
    } 
} 
+3

Grazie. Usando queste informazioni sono tornato a 4.3 per ora. Sembrava più facile. – Steve

8

È possibile fare questo override bower package prova questo codice ho modificato il tuo bower.json look per il cambiamento di fondo di questo codice .. spero che funziona

{ 
    "name": "watermelon", 
    "version": "0.0.0", 
    "dependencies": { 
    "angular": "^1.3.0", 
    "angular-animate": "^1.3.0", 
    "angular-bootstrap": "~0.13.3", 
    "angular-cookies": "^1.3.0", 
    "angular-google-maps-native": "~2.0.0", 
    "angular-mocks": "~1.3.0", 
    "angular-resource": "^1.3.0", 
    "angular-route": "^1.3.0", 
    "angular-sanitize": "^1.3.0", 
    "angular-scenario": "~1.3.0", 
    "angular-touch": "^1.3.0", 
    "angular-ui-router": "~0.2.15", 
    "bootstrap": "^3.2.0", 
    "bootstrap-switch": "~3.3.2", 
    "eonasdan-bootstrap-datetimepicker": "~4.15.35", 
    "es5-shim": "^4.0.0", 
    "font-awesome": "~4.4.0", 
    "json3": "^3.3.0", 
    "moment": "~2.10.6", 
    "ng-tags-input": "3.0.0", 
    "requirejs": "latest", 
    "requirejs-domready": "latest", 
    "stacktrace-js": "~0.6.4", 
    "underscore": "~1.8.3" 
    }, 

"overrides":{ 
    "font-awesome": { 
    "main": [ 
     "css/font-awesome.min.css" 
    ] 
    } 
} 

}

+1

Ho provato questo, ma sfortunatamente non ha funzionato. Mi piacerebbe davvero sapere se questo è un problema noto con font-fantastico o no. – Tiago

+1

Sono abbastanza sicuro che il problema qui è che sta usando 'font-awesome' e non' fontawesome'. Controlla che bower.json 'font-awesom.min.css' sia il nome del file, ma il progetto può essere chiamato sia. basta eseguire 'bower search font-awesome' – TMB

+0

questa stessa correzione funziona per [problema con bootstrap] (https://github.com/twbs/bootstrap/issues/16663) anche – Hashbrown

0

sembra componente pergolato "fontawesome" ha alcuni problemi. Puoi provare a usare invece "components-font-awesome" nel tuo bower.json, risolverà il problema di non iniettare correttamente il file css. si può dare un'occhiata nella sua Github repo qui: https://github.com/components/font-awesome

2
bower install components-font-awesome --save 

dovrebbe risolvere il problema.
E 'menzionato sulla loro pagina Github sotto Gestori di pacchetti here

+0

Appena notato che questo risolve il problema per lo sviluppo usando "grunt serve" funzionerà ma "grunt build" mancherà ancora dei caratteri sulla cartella dei font, per questo è necessario aggiungere la voce su Gruntfile.js per copiare i caratteri, basta imitare caratteri boostrap e dovrebbe quindi funzionare. –

Problemi correlati