咕噜咕噜的任务不起作用？

Question

这是我的grunt sass任务。

我找到文件并合并它们;然后在css中编译build.scss文件。 但它不起作用。

/* 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']);

没有错误。我觉得合并不能正常工作。

生成的文件build.scss不包含任何内容。 文件显示为空。

请指导我。

Answer 1

我得到了解决方案..我在单个文件中导入了所有文件然后我正在编译相同的..

在我的档案中

@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";

在我的任务中：

/* 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

如评论中所述，使用@import创建单个Sass文件。然后在您的Grunt任务中使用files配置它。

以下示例以递归方式搜索要在css/sass目录中编译的文件，然后将它们输出到css目录中。现在，当您将希望编译的Sass文件添加到CSS文件中时，您不需要做任何额外的操作，它就可以正常工作。

示例

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']);
};