Grunt livereload compile bootstrap sass files using yeoman

Question

My question is simple I have made a basic installation of yeoman (yo webapp) with bootstrap, sass, compass and jquery.

I would like to compile bootstrap sass files on livereload as I am using grunt serve. Currently only main.scss file seems to be compiled on livereload.

Is it possible ? If, yes please tell me how ?

Best regards,

Answer 1

Try like this:

Watch:

watch: {
    livereload: {
        files: [
            '<%= yeoman.app %>/*.html',
            '{.tmp,<%= yeoman.app %>}/styles/{,*/}*.css',
            '{.tmp,<%= yeoman.app %>}/scripts/{,*/}*.js',
            '<%= yeoman.app %>/img/{,*/}*.{png,jpg,jpeg,gif,webp,svg}'
        ],
        tasks: ['livereload']
    },

    sass: {
        files: "<%= yeoman.app %>/sass/{,**/}*.sass",
        tasks: ["sass:tmp"]
    }
}

Sass:

sass: {
    tmp: {
        files: {
            "<%= yeoman.tmp %>/styles/index.css": "app/sass/index.sass",
        },
        options: {
            paths: ["app/sass"]
        }
    },
}

Answer 2

Just hit "save" in the main.scss file after you make changes in boostrap sass files. For example, I reconfigured color variables in bootstrap sass file which containes variable, then saved it, as well as main.scss file. The browser reloaded and made everything look like tomato.