Incluindo arquivos CSS externos no projeto Famo.us

Question

Criei um projeto usando o gerador Yeoman do Famo.us.Ele cria um arquivo index.html, uma pasta de estilos, uma pasta src e uma pasta de conteúdo.O gruntfile especifica que index.html inclui todos os arquivos css na pasta de estilos.No entanto, quero incluir um arquivo css do Google Fonts, referenciando-o em meu index.html.Não consigo inserir isso manualmente porque o grunt substituirá minhas alterações sempre que eu salvar um arquivo em meu projeto. Como faço para fazer o grunt carregar meus arquivos CSS externos/referencia-los em meu arquivo index.html?

Answer 1

Certifique-se de incluir sua folha de estilo fora do <!-- build:css comentários.

Isso funciona:

<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 -->

Solução de problemas:

• Se isso não funcionar com o live-reload, tente reiniciar o servidor!
• Certifique-se de atualizar a página (ou seja,limpe o cache ou abra o console do desenvolvedor)

Arquivos de exemplo:

Ver arquivos de exemplo nesta essência!

Explicação:

A tarefa específica do Grunt que reescreve folhas de estilo CSS em index.html é chamada cssmin, que é usado em conjunto com useminPrepare e usemin.

Basicamente, useminPrepare escreve um cssmin configuração para você com base no <!-- build:css comentários em seu arquivo html.Ver usemin documentos.