What is workflow in Yeoman to work with Sass files?

Question

I try to use yeoman but I don\'t know how to use my own sass files with it.

With

grunt server

Sass files are watched and compiled into

Answer 1

The actual magic for development is happening in

mountFolder(connect, '.tmp'),

for the connect-livereload middleware for grunt-contrib-watch.

This makes the local server also serve the contents of the .tmp folder, which is why you can reference styles/main.css and get .tmp/styles/main.css in return.

useminPrepare is usually never called in the server task.

Answer 2

You just include it like

<link rel="stylesheet" href="styles/style.css">

Yeoman/grunt will know when running the server that it should grab the sass file from the temp folder.

Answer 3

What you are looking for is documented on: https://github.com/yeoman/grunt-usemin

Simply wrap your css imports in a comment block similarly to the way it's done with the javascript files

<!-- build:css styles/main.css -->
<link rel="stylesheet" href="styles/base.css">
<link rel="stylesheet" href="styles/modules.css">
<link rel="stylesheet" href="styles/layout.css">
<!-- endbuild -->

make sure your generator is up to date and your grunt tasks are all set. The one doing the magic is 'useminPrepare'