grunt sass 任务不工作？

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

grunt sass 任务不工作？

grunt sass task is not working?

javascript

css

sass

gruntjs