Grunt/SASS：将CSS输出到单个文件中，并保持对多个源文件的源映射为真

Question

我正在 Grunt 任务中设置 SASS 源地图 (grunt-contrib-sass)。理想情况下，我所有的项目 CSS 都将合并到一个文件中，并使源映射与原始源保持一致。

我最初的想法是，将输出源保存在单独的文件中是最简单的，这样会很容易，因为映射是一对一的，只有一个 .css 输出文件对于每个 .scss 源文件。但这对于我们的其他项目来说并不是一个理想的解决方案，因为我们希望将 HTTP 请求保持在最低限度。

我可以看到如何组合我的源文件，并从中输出 SASS，作为一个输出文件，或者我可以在 SASS 导出后连接我的 .css 输出它，但显然，映射在这两种实现中都不是真的。

这似乎是 grunt-contrib-sass 的一个特性，但我没有找到这样的特性。

我的 SASS 配置如下所示：

    sass: {
        dist: {
            files: [{
                expand: true,
                cwd: './src/',
                src: ['**/*.scss', '**/*.sass'],
                dest: './dist',
                ext: '.css'
            }],
            options: {
                style: 'compressed',
            }

        }
    },

我尝试了 documentation 中的样式选项，发现四个中只有两个 'compressed' 和 'expanded' 实际有效。 'compact' 和 'nested' 不起作用。我没有看到符合我需要的选项。

如何从 SASS 输出到单个 CSS 文件，并使多个源文件的源映射保持真实？

Answer 1

一种解决方案可能是为开发编译为单独的文件，但为生产编译为 css 文件。这可能是显而易见的解决方案，因为无论如何我们都不希望在生产中加载地图文件。

但如果有一个直接开箱即用的组合文件选项，那仍然会更容易。

Answer 2

为了将所有样式输出到单个 CSS 样式表中，我建议在 scss 目录的根目录中放置一个 main.scss 文件，在其中放置 @import 语句以包含您想要的所有其他 scss 文件的顺序正确。

确保在所有部分文件名（您正在导入的文件）前加上下划线 _，例如 _homepage-styles.scss。这很重要，因为它告诉 sass 编译器忽略将这些文件编译成它们的 CSS 等价物。因此，编译器将为每个 SCSS 文件输出一个 CSS 文件没有下划线 _.

所以你的输出将是 main.css

对于源地图，在 SASS 配置的选项下添加：

options: {
    'sourcemap': 'auto'
}

它应该映射到各个 scss 文件。 :)

Grunt/SASS：将CSS输出到单个文件中，并保持对多个源文件的源映射为真

Grunt/SASS: Output CSS into a single file, and keep source mapping true to multiple source files

sass

gruntjs

grunt-contrib-sass