javascript - Grunt Sass - 多个 css 样式输出

Question

我已经进行了相当多的搜索，但似乎无法对此给出完整的答案。

我正在使用 grunt 来管理我的 sass 流，并且我一直在尝试找到一种方法来从 grunt 输出多个 css 样式。

例如:

base.scss 应该有两个输出，第一个是 style.css，它具有扩展的 css 样式。

第二个应该是 style.min.css，它具有压缩的 css 样式。

如何配置我的 gruntfile 来为我执行此操作？

Answer 1

您可以通过两种配置来做到这一点，一种输出扩展的 CSS，另一种输出压缩的 CSS。然后注册您的任务以运行两者。您的 grunt 文件应如下所示:

示例

module.exports = function(grunt) {
    'use strict';
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        // Sass
        sass: {
            dev: { // This outputs the expanded css file
                files: {
                    'style.css': 'base.scss'
                }
            },
            prod: { // This outputs the compressed css file
                options: {
                    outputStyle: 'compressed' // Minify output
                },
                files: {
                    'style.min.css': 'base.scss'
                }
            }
        }
    });

    grunt.registerTask('default', ['sass:dev', 'sass:prod']); // Task runs both
}