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

.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;   } catch (e) {}    grunt.initConfig({     yeoman: yeomanConfig,     watch: {       coffee: {         files: ['<%= yeoman.app %>/scripts/{,*/}*.coffee'],         tasks: ['coffee:dist']       },       coffeeTest: {         files: ['test/spec/{,*/}*.coffee'],         tasks: ['coffee:test']       },       compass: {         files: ['<%= yeoman.app %>/styles/{,*/}*.{scss,sass}'],         tasks: ['compass']       },       livereload: {         files: [           '<%= yeoman.app %>/{,*/}*.html',           '{.tmp,<%= yeoman.app %>}/styles/{,*/}*.css',           '{.tmp,<%= yeoman.app %>}/scripts/{,*/}*.js',           '<%= yeoman.app %>/images/{,*/}*.{png,jpg,jpeg,gif,webp}'         ],         tasks: ['livereload']       }     },     connect: {       livereload: {         options: {           port: 9000,           // Change this to '0.0.0.0' to access the server from outside.           hostname: 'localhost',           middleware: function (connect) {             return [               lrSnippet,               mountFolder(connect, '.tmp'),               mountFolder(connect, yeomanConfig.app)             ];           }         }       },       test: {         options: {           port: 9000,           middleware: function (connect) {             return [               mountFolder(connect, '.tmp'),               mountFolder(connect, 'test')             ];           }         }       }     },     open: {       server: {         url: 'http://localhost:<%= connect.livereload.options.port %>'       }     },     clean: {       dist: ['.tmp', '<%= yeoman.dist %>/*'],       server: '.tmp'     },     jshint: {       options: {         jshintrc: '.jshintrc'       },       all: [         'Gruntfile.js',         '<%= yeoman.app %>/scripts/{,*/}*.js'       ]     },     karma: {       unit: {         configFile: 'karma.conf.js',         singleRun: true       }     },     coffee: {       dist: {         files: {           '.tmp/scripts/coffee.js': '<%= yeoman.app %>/scripts/*.coffee'         }       },       test: {         files: [{           expand: true,           cwd: '.tmp/spec',           src: '*.coffee',           dest: 'test/spec'         }]       }     },     compass: {       options: {         sassDir: '<%= yeoman.app %>/styles',         cssDir: '.tmp/styles',         imagesDir: '<%= yeoman.app %>/images',         javascriptsDir: '<%= yeoman.app %>/scripts',         fontsDir: '<%= yeoman.app %>/styles/fonts',         importPath: '<%= yeoman.app %>/components',         relativeAssets: true       },       dist: {},       server: {         options: {           debugInfo: true         }       }     },     concat: {       dist: {         files: {           '<%= yeoman.dist %>/scripts/scripts.js': [             '.tmp/scripts/{,*/}*.js',             '<%= yeoman.app %>/scripts/{,*/}*.js'           ]         }       }     },     useminPrepare: {       html: '<%= yeoman.app %>/index.html',       options: {         dest: '<%= yeoman.dist %>'       }     },     usemin: {       html: ['<%= yeoman.dist %>/{,*/}*.html'],       css: ['<%= yeoman.dist %>/styles/{,*/}*.css'],       options: {         dirs: ['<%= yeoman.dist %>']       }     },     imagemin: {       dist: {         files: [{           expand: true,           cwd: '<%= yeoman.app %>/images',           src: '{,*/}*.{png,jpg,jpeg}',           dest: '<%= yeoman.dist %>/images'         }]       }     },     cssmin: {       dist: {         files: {           '<%= yeoman.dist %>/styles/main.css': [             '.tmp/styles/{,*/}*.css',             '<%= yeoman.app %>/styles/{,*/}*.css'           ]         }       }     },     htmlmin: {       dist: {         options: {           /*removeCommentsFromCDATA: true,           // https://github.com/yeoman/grunt-usemin/issues/44           //collapseWhitespace: true,           collapseBooleanAttributes: true,           removeAttributeQuotes: true,           removeRedundantAttributes: true,           useShortDoctype: true,           removeEmptyAttributes: true,           removeOptionalTags: true*/         },         files: [{           expand: true,           cwd: '<%= yeoman.app %>',           src: ['*.html', 'views/*.html'],           dest: '<%= yeoman.dist %>'         }]       }     },     cdnify: {       dist: {         html: ['<%= yeoman.dist %>/*.html']       }     },     ngmin: {       dist: {         files: [{           expand: true,           cwd: '<%= yeoman.dist %>/scripts',           src: '*.js',           dest: '<%= yeoman.dist %>/scripts'         }]       }     },     uglify: {       dist: {         files: {           '<%= yeoman.dist %>/scripts/scripts.js': [             '<%= yeoman.dist %>/scripts/scripts.js'           ],         }       }     },     copy: {       dist: {         files: [{           expand: true,           dot: true,           cwd: '<%= yeoman.app %>',           dest: '<%= yeoman.dist %>',           src: [             '*.{ico,txt}',             '.htaccess',             'components/**/*',             'images/{,*/}*.{gif,webp}'           ]         }]       }     }   });    grunt.renameTask('regarde', 'watch');   // remove when mincss task is renamed   grunt.renameTask('mincss', 'cssmin');    grunt.registerTask('server', [     'clean:server',     'coffee:dist',     'compass:server',     'livereload-start',     'connect:livereload',     'open',     'watch'   ]);    grunt.registerTask('test', [     'clean:server',     'coffee',     'compass',     'connect:test',     'karma'   ]);    grunt.registerTask('build', [     'clean:dist',     'jshint',     'test',     'coffee',     'compass:dist',     'useminPrepare',     'imagemin',     'cssmin',     'htmlmin',     'concat',     'copy',     'cdnify',     'usemin',     'ngmin',     'uglify'   ]);    grunt.registerTask('default', ['build']); }; 

Answer 1

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'

Answer 2

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.