使用Grunt.js动态监视并随后将SASS文件目录编译为一个CSS文件

我是Grunt.js的新手，但我已经开始掌握窍门了。不过，我想用它做的主要事情是，我似乎无法确定下来

我在这里的目标是将grunt指向一个目录，让它监视所有匹配的文件，并在更改后将它们编译成一个新的CSS文件

以下是我当前的Grunfile文件：

module.exports = function(grunt) {
    // Project configuration.
    grunt.initConfig({
        // CONFIG =========================/
        pkg: grunt.file.readJSON('package.json'),
        sass: {
            dist: {
                files: {
                    'assets/css/style.css' : 'assets/css/sass/*.scss'
                }
            }
        },
        watch: {
            css: {
                files: 'assets/css/sass/*.scss',
                tasks: ['sass']
            }
        }
    });
    // DEPENDENT PLUGINS =========================/
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.loadNpmTasks('grunt-contrib-sass');

    // TASKS =====================================/
    grunt.registerTask('default', ['watch']);
};

到目前为止，我一直在使用grunt contrib手表和grunt contrib sass。我尝试了compass和目录导入，但我也无法让它们中的任何一个执行我正在尝试的操作

---

在一天结束时，我真的只是试图避免编写导入文件，因为源代码顺序对我编写SASS的方式并不重要，因为我真的很想知道如何实现这一点。

我不确定通过使用Sass和Grunt Contrib Sass可以实现什么，但您可以通过使用一个可以导入整个目录的Sass插件来实现类似的目标。要使用该插件，您需要使用Grunt Contrib Sass中的选项，并将其指向一个主

styles.scss

文件，该文件可能类似于：

@import "vendor/*";
@import "modules/*";
@import "partials/*";

sass: {
    dist: {
        options: {
            require: 'sass-globbing'
        },
        files: {
            'assets/css/style.css' : 'assets/css/sass/style.scss'
        }
    }
}

然后你的grunt文件会有如下内容：

@import "vendor/*";
@import "modules/*";
@import "partials/*";

sass: {
    dist: {
        options: {
            require: 'sass-globbing'
        },
        files: {
            'assets/css/style.css' : 'assets/css/sass/style.scss'
        }
    }
}