使用 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 并且我能够生成一组文件。我的 gruntfile 看起来像这样：

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

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

Answer 1

我想我明白了。我用以下模块编辑了我的 g运行tfile：sass、concat 和 copy.

总而言之，我将特定品牌 scss 文件连接到主 scss 文件，然后将所有支持文件复制到 dist 目录中的 sass 文件夹.然后我运行 sass 在 concat 文件上输出最终的 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 个文件

compile sass files multiple times with grunt-contrib-concat

javascript

css

sass

gruntjs

grunt-contrib-concat