Question

编辑：经过进一步的反思，我相信我的问题是关于grunt-contrib-concat而不是sass。

我有一个sass文件夹，其中一个名为colors.scss

<div class="col-md-6 p_0"
   [ngClass]="{'file-over': hasBaseDropZoneOver}"
   ng2FileDrop [uploader]="uploader"
   (click)="fileInput.click()">

   Base drop zone
   <input type="file" #fileInput ng2FileSelect [uploader]="uploader" style="display: none"/>
</div>

我想生成十几组已编译的css文件，我会为每个编译集换出colors.css文件。我试图找出如何将其合并到我的gruntfile中而不为每个文件生成单独的任务。我想在一个名为colors的文件夹中查找一个任务，该文件夹又包含所有colors.scss文件，然后为每个文件进行编译并将编译后的css文件集放在与colors.scss同名的文件夹中文件。问题是我不知道从哪里开始。我目前正在使用grunt-contrib-sass，而且我能够生成一组文件。我的gruntfile看起来像这样：

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

适用于编译一个集合，但我想遍历颜色文件并为找到的每个文件生成一个集合。这可能吗？我应该从哪里开始？

Answer 1

想想我明白了。我使用以下模块编辑了我的gruntfile：sass，concat和copy。

总之，我将特定品牌scss文件连接到主scss文件，然后将所有支持文件复制到dist目录中的sass文件夹。然后我在concat文件上运行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/' }
                ]
            }
        }
    });
};

使用grunt-contrib-concat多次编译sass文件

1 个答案: