1

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

我最初的想法是，将输出源保存在单独的文件中是最简单的，这样会很容易，因为映射是一对一的，每个 .scss 源文件都有一个 .css 输出文件。但这对于我们的其他项目来说并不是一个理想的解决方案，因为我们希望将 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',
            }

        }
    },

我尝试了文档中的样式选项，发现四个中只有两个，“压缩”和“扩展”实际上有效。“紧凑”和“嵌套”不起作用。我没有看到一个看起来特定于我需要的选项。

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

4

2 回答 2

2

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

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

所以你的输出将是main.css

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

options: {
    'sourcemap': 'auto'
}

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

于 2018-10-19T21:59:37.977 回答
0

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

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

于 2018-10-19T19:22:50.043 回答