用grunt-contrib-concat多次編譯sass文件

Question

編輯：經過進一步的思考我相信我的問題是關於grunt-contrib-concat而不是sass。

我的SASS文件的文件夾，其中一個被稱爲colors.scss

//neutrals 
$white: #fff; 
$light-gray: #eee; 
$gray: #9f9f9f; 
$slate: #59595A; 
$charcoal: #404041; 

$gold: #FFD34E; 

//define non-neutral colors by use. These are what would change if our app was whitelabeled. 
$bright-accent-color: tint(#FF4849, 0%); 
$muted-accent-color: $bright-accent-color; 
$dark-accent-color: $bright-accent-color; 

$note-color: #FFFAD5; 
$bright-warning-color: black; // will this be used in new scheme? 
$muted-warning-color: tint(#DB9E36, 20%); 

$dark-warning-color: $charcoal; 
$light-background-color: #f3f6f9; 

$primary-nav-color: #172740; // dark blue 
$secondary-nav-color: #263D59; // blue 

我想產生十幾臺編譯CSS文件，其中我會掉出colors.css文件爲每個編譯集。我想弄清楚如何將這個併入我的gruntfile中，而不是爲每個任務生成單獨的任務。我希望有一個任務在文件夾中查找顏色，該文件又包含所有colors.scss文件，然後爲每個文件執行編譯並將編譯後的一組css文件放在與colors.scss同名的文件夾中文件。問題是我不知道從哪裏開始。目前我正在使用grunt-contrib-sass，並且能夠生成一組文件。我gruntfile看起來是這樣的：

sass: { 
     dist: { 
      options: { 
       style: 'expanded' 
      }, 
      files: { 
       'dist/main.css': 'app/css/main.scss' 
      } 
     } 
    }, 

工作正常編譯一組，但我想遍歷顏色文件並生成一組針對找到的每個文件。這可能嗎？我應該從哪裏開始？

Answer 1

想我明白了。我用下面的模塊編輯了我的grunt文件：sass，concat和copy。

總之，我將特定品牌的scss文件連接到主scss文件，然後將所有支持文件複製到dist目錄中的sass文件夾中。然後我對連續文件運行sass，並將最終的css文件輸出到dist css文件夾。

赫雷什配置：

module.exports = function(grunt) { 
    'use strict'; 
    var sassFiles = []; 
    grunt.loadNpmTasks('grunt-contrib-sass'); 
    grunt.loadNpmTasks('grunt-contrib-concat'); 
    grunt.loadNpmTasks('grunt-contrib-copy'); 
    grunt.registerTask('default', ['concat', 'copy:sass', 'sass']); 
    grunt.initConfig({ 
     concat: (function(){ 
      var concat = { 
       options: { 
        sourceMap: true 
       } 
      }; 
      var files = []; 
      grunt.file.recurse('app/css/brands/', function(abspath, rootdir, subdir, filename){ 
       files.push(filename); 
      }); 

      sassFiles = files; 
      files.forEach(file => { 
       concat[file] = { 
        src: [ 
         'app/css/brands/'+file, 
         'app/css/main.scss' 
        ], 
        dest: 'dist/css/sass/'+file 
       }; 
      }); 

      return concat; 
     }()), 
     sass: { 
      dist: { 
       options: { 
        style: 'expanded' 
       }, 
       files: (function(){ 
        var fileObject = {}; 
        sassFiles.forEach(file => { 
         var filename = file.split('.')[0]; 
         fileObject['dist/css/'+filename+'.css'] = 
          'dist/css/sass/'+file; 
        }); 
        return fileObject; 
       }()) 
      } 
     }, 
     copy: { 
      sass: { 
       files: [ 
        { expand: true, cwd: 'app/css', src: '**', dest: 'dist/css/sass/' } 
       ] 
      } 
     } 
    }); 
};