javascript - 使用 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 的文件夹中查找，该文件夹又包含所有 colors.scss 文件，然后对每个文件进行编译，并将编译后的 css 文件集放在与 colors.scss 同名的文件夹中文件。问题是我不知道从哪里开始。我目前正在使用 grunt-contrib-sass，并且能够生成一组文件。我的 grunt 文件如下所示:

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

这对于编译一组效果很好，但我想遍历颜色文件并为找到的每个文件生成一组。这可能吗？我应该从哪里开始？

Answer 1

我想我明白了。我使用以下模块编辑了我的 gruntfile: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/' }
                ]
            }
        }
    });
};