Question

我正在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',
            }

        }
    },

我尝试了documentation中的样式选项，但发现“压缩”和“扩展”这四个只有两个真正起作用了。 “紧凑”和“嵌套”无效。我没有看到适合我需要的选项。

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

Answer 1

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

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

因此您的输出将为main.css

对于源地图，请将其添加到SASS配置的选项下：

options: {
    'sourcemap': 'auto'
}

它应该向下映射到各个scss文件。：）

Answer 2

一种解决方案可能是将开发人员的文件编译为单独的文件，但将生产时的concat css文件编译为单独的文件。这可能是显而易见的解决方案，因为我们始终不希望将地图文件加载到生产环境中。

但是，如果可以直接使用组合文件选项，将会更加容易。

Grunt / SASS：将CSS输出到单个文件中，并使源映射真实地映射到多个源文件

2 个答案: