grunt sass任務不工作？

這是我grunt sass任務。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不包含任何東西。文件顯示爲空。

請指導我。

來源

2015-08-21 Javascript Coder

在步兵，而不是你爲什麼要合併文件中使用SCSS的'import'？ –

我同意@BrettDeWoody。通常，當您使用SaSS時，您應該有一個主要文件導入其他所有內容。例如[bootstrap-sass]（https://github.com/twbs/bootstrap-sass/blob/master/assets/stylesheets/_bootstrap.scss）。 – Sapher

我可以做到這一點......但它會要求參考..對嗎？ –

我得到了解決。我在我的文件

@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 
     } 

     }, 
    }; 
};

來源

2015-08-21 08:39:32

This works ,,,,,,, –

如評論中所述，使用@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']); 
};

來源

2015-08-21 10:32:56

grunt sass任務不工作？

回答

相關問題