Compresi i file CSS esterni nel progetto FAMO.US

Question

Ho creato un progetto usando il generatore di Yeoman di Famo.us.Crea un file index.html, una cartella degli stili, una cartella SRC e una cartella di contenuto.Il GruntFile specifica che Index.html include tutti i file CSS nella cartella degli stili.Tuttavia, voglio includere un file CSS di Google Fonts, riferindolo nel mio indice.html.Non riesco a inserirlo manualmente perché Grunt sovrascriverà le mie modifiche ogni volta che salvo un file nel mio progetto, come faccio a fare Grunt caricare i miei file CSS esterni / riferimenti nel mio file index.html?

Answer 1

Assicurati di includere il foglio di stile fuori dei Commenti <!-- build:css.

Questo funziona:

<link href='http://fonts.googleapis.com/css?family=Gochi+Hand' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="lib/famous/core/famous.css" />

<!-- build:css(app/) css/app.css -->
<link rel="stylesheet" type="text/css" href="styles/app.css" />
<!-- bower:css -->

.

Risoluzione dei problemi:

.
• Se questo non funziona con Live-Ricarica, prova a riavviare il server!
• Assicurati di aggiornare la pagina (cioè clear cache o aperta console di sviluppatori)

File di esempio:

Vedi File di esempio in questo GIST !

Spiegazione:

L'attività Grunt specifica che riscrive le fogli di stile CSS in Index.html è chiamata cssmin, che viene utilizzata in combinazione con useminPrepare e usemin.

Fondamentalmente, useminPrepare scrive una configrazione di cssmin per voi in base ai commenti <!-- build:css nel file HTML.Vedi Usemin Docs.