Including external css files in Famo.us project

Question

I've created a project using Famo.us's Yeoman generator. It creates an index.html file, a styles folder, a src folder, and a content folder. The gruntfile specifies that index.html includes all css files under the styles folder. However, I want to include a google fonts css file, by referencing it in my index.html. I can't insert this manually because grunt will overwrite my changes everytime i save a file in my project, how do I go about making grunt load my external css files/reference them in my index.html file?

Answer 1

Make sure you include your stylesheet outside of the <!-- build:css comments.

This works:

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

Troubleshooting:

• If this does not work with live-reload, try restarting the server!
• Be sure to refresh page (i.e. clear cache or open developer console)

Example files:

See example files in this gist!

Explanation:

The specific Grunt task that rewrites CSS stylesheets in index.html is called cssmin, which is used in conjunction with useminPrepare and usemin.

Basically, useminPrepare writes a cssmin configration for you based on the <!-- build:css comments in your html file. See usemin docs.