我正试图迁移我的网站，用gulp-SASS而不是Compass编译SASS。它看起来确实很有希望——我喜欢它的速度，与Gulp的集成很有用。不幸的是，当我在媒体查询中导入文件时，我发现gulp-sass对CSS输出中的换行符做了一些奇怪的事情。
我们有几个SCSS文件，它们被编译成单独的CSS文件进行开发。对于生产，我们将每个SCSS文件导入一个global.SCSS文件，该文件将被编译为一个CSS文件。该文件中的导入看起来像：
@import "header";
@import "footer";
@import "forms";
@import "posts";
@media screen and (min-width: 480px) {
@import "media-query-480";
}
@media screen and (min-width: 768px) {
@import "media-query-768";
}
当我运行我的gulp-sass任务时，它会编译单独的文件media-query-480.css和media-query-760.css fine，但会从global.css的相应部分删除样式规则之间的换行符
.entry-meta-date {
display: block;
}
.entry-meta-date .day {
display: inline;
}
.entry-meta-date-under {
display: none;
}
在media-query-480.css中变成这个，这是一个很好的
.entry-meta-date {
display: block; }
.entry-meta-date .day {
display: inline; }
.entry-meta-date-under {
display: none; }
但这是在global.css 的相应部分中吗
.entry-meta-date {
display: block; }
.entry-meta-date .day {
display: inline; }
.entry-meta-date-under {
display: none; }
看起来libsass已经删除了第二次传递中的换行符。当你有一个大的CSS文件，成千上万的规则混杂在一起时，这不是很有用。
(我检查了SCSS文件的编码和行尾，它们都是UTF-8和LR。)
除了在Gulp中进行串联之外，还有什么变通方法吗？
==========================
编辑
当我用文件media-query-480.scss中的规则包装媒体查询时，也会发生同样的事情：当我这样做时，该行也会从该文件中断disppear。删除媒体查询中代码的换行符是正常的libsass行为吗？
如果gulp-sass是在节点sass之上构建的，您还可以运行outputStyle选项，该选项默认设置为嵌套。嵌套值将执行上面在transpiled CSS中发生的操作，如下所示：
.btn {
font-size: 12px; }
libsass不以嵌套样式保留新行：https://github.com/sass/libsass/issues/552
为了避免这种情况，例如，将选项outputStyle:expanded传递到节点sass，您的CSS将正常输出：
.btn {
font-size: 12px;
}
如果对webpack使用sass加载程序，只需在webpack配置中添加以下内容：
sassLoader: {
outputStyle: 'expanded'
}
更多文档可以在这里找到：
https://github.com/sass/node-sasshttps://github.com/jtangelder/sass-loader
这是libsass中的一个错误，在https://github.com/sass/libsass/issues/1103:libsass开发人员计划在他们的3.4版本中解决空白问题。