What is workflow in Yeoman to work with Sass files?

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

.tmp/styles/

But there is no reference to the compiled stylesheet, except <link rel="stylesheet" href="styles/main.css">

So, what is the recommended way to use the compiled sass files in index.html during development?

E.g. grunt server, if I change my style app/styles/my.sass into .tmp/styles/my.css, this is overwritten and it is outside the server (localhost:9000). Therefore, it is impossible to link it in index.html.

With grunt build is everything within main.css include my.sass but during the development I don't know how to use my own sass files in index.html.

Can you give me some simple example?

It is default yeoman installation. I did this:

1. yo angular test
2. I add app/styles/style.sass
3. grunt server this compile style.sass into .tmp/styles/style.css
4. now I don't know how to include style.css it in html

(sorry may be this is a stupid question but I am new in yeoman and grunt also)

This is Gruntfile.js from yeoman:

'use strict';
var lrSnippet = require('grunt-contrib-livereload/lib/utils').livereloadSnippet;
var mountFolder = function (connect, dir) {
  return connect.static(require('path').resolve(dir));
};

module.exports = function (grunt) {
  // load all grunt tasks
  require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks);

  // configurable paths
  var yeomanConfig = {
    app: 'app',
    dist: 'dist'
  };

  try {
    yeomanConfig.app = require('./component.json').appPath || yeomanConfig.app;