grunt sass task is not working?

Question

This is my grunt sass task.

I am finding the files and merging them; then compiling the build.scss file in css. But its not working.

/* jshint node:true */
'use strict';
module.exports = function(config) {
  return {

      buildScssFiles: {
       src: [
         '<%= srcDir %>/css/sass/variables.hpexp.scss',
         '<%= srcDir %>/css/sass/tightform.scss',
         '<%= srcDir %>/css/sass/tables_lists.scss',
         '<%= srcDir %>/css/sass/table.scss',
         '<%= srcDir %>/css/sass/submenu.scss',
         '<%= srcDir %>/css/sass/singlestat.scss',
         '<%= srcDir %>/css/sass/sidemenu.scss',
         '<%= srcDir %>/css/sass/search.scss',
         '<%= srcDir %>/css/sass/piechart.scss',
         '<%= srcDir %>/css/sass/panel.scss',
         '<%= srcDir %>/css/sass/overrides.scss',
         '<%= srcDir %>/css/sass/navbar.scss',
         '<%= srcDir %>/css/sass/graph.scss',
         '<%= srcDir %>/css/sass/grafana.scss'
         //'<%= srcDir %>/css/sass/grafana-responsive.scss'
         //'<%= srcDir %>/css/sass/panel.scss',
         //'<%= srcDir %>/css/sass/panel.scss',
       ],
       dest: '<%= srcDir %>/css/sass/build/build.scss',
      },

      dist: {   //Target
        options: {    // Target options
          style: 'expanded',
        },
        files: {  // Dictionary of files
          '<%= srcDir %>/css/common-bsm-fix.css' : '<%= srcDir %>/css/sass/build/build.scss', // pd-hpe-light.css
          //'css/test.css':'sass/build.scss'  //take this file and do the compilation // 'destination': 'source'
        }
      // //   files: [{
      // //   expand: true,
      // //   cwd:'<%= srcDir %>/css/hpe-bsm-style/implementations/scss/bootstrap3/scss',
      // //   src: ['*.scss'],
      // //   dest: '../public',
      // //   ext: '.css'
      // // }]
      //   files: [{
      //   expand: true,
      //   cwd:'<%= srcDir %>/css/sass/',
      //   src: ['*.scss'],
      //   dest: '../public',
      //   ext: '.css'
      // }]
      },
  };
};

grunt.registerTask('css', ['less:src', 'concat:cssDark', 'concat:cssLight','concat:cssHPExp', 'sass:buildScssFiles', 'sass:dist']);

No errors. I feel merging is not working properly.

The file generated build.scss doesn't contain anything. File show empty.

Please guide me.

Answer 1

I got the solution.. I imported all file in single file and then I am compiling the same..

in my file

@import "variables.hpexp";
@import "tightform";
@import "tables_lists";
@import "table";
@import "submenu";
@import "singlestat";
@import "sidemenu";
@import "search";
@import "piechart";
@import "panel";
@import "overrides";
@import "navbar";
@import "graph";
//@import "grafana";

In my task :

/* jshint node:true */
'use strict';
module.exports = function(config) {
  return {

      buildScssFiles: {
       src: [
         '<%= srcDir %>/css/sass/mergre-all-scss.scss'
       ],
       dest: '<%= srcDir %>/css/sass/build/build.scss'
      },

      dist: {   //Target
        options: {    // Target options
          style: 'expanded',
        },
        files: {  // Dictionary of files
          '<%= srcDir %>/css/common-bsm-fix.css' : '<%= srcDir %>/css/sass/build/build.scss', // pd-hpe-light.css
        }

      },
  };
};

Answer 2

As mentioned in the comments, use @import to create a single Sass file. Then in your Grunt task configure it using files .

The following example, recursively searches for files to compile within the css/sass directory and then outputs them into the css directory. Now, when you add further Sass files that you wish to be compiled to a CSS file you do not need to do anything extra, it will just work.

Example

module.exports = function (grunt) {
    'use strict';

    grunt.loadNpmTasks('grunt-sass');

    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),

        // Sass
        sass: {                
            dist: {
                files: [
                  {
                      expand: true, // Recursive
                      cwd: "css/sass", // The startup directory
                      src: ["**/*.scss"], // Source files
                      dest: "css", // Destination
                      ext: ".css" // File extension 
                  }
                ]
            }
        }
    });

    grunt.registerTask('default', ['sass']);
};