我正在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文件，并使源映射真实地映射到多个源文件？
为了将所有样式输出到一个CSS样式表中，建议main.scss您在scss目录的根目录中放置一个文件，在该目录中放置@import语句以按正确的顺序包含您想要的所有其他scss文件。
确保在所有部分文件名（您要导入的文件）之前加一个下划线，_例如_homepage-styles.scss。这很重要，因为它告诉sass编译器忽略将这些文件编译为等效的CSS。因此，编译器将为每个SCSS文件输出一个CSS文件，而不带下划线_。
所以你的输出是 main.css
对于源地图，将其添加到SASS配置的选项下：
options: {
'sourcemap': 'auto'
}
它应该向下映射到各个scss文件。:)
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句