当我在媒体查询中 @import 一个 SCSS 文件时，为什么 gulp-sass 删除了换行符？

Question

我正在尝试迁移我的站点以使用 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很好，但是从 global.css 的相应部分删除了样式规则之间的换行符。例如 media-query-480.scss

中的这个位

.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 中的规则包装时，同样的事情发生了：当我这样做时，换行符也会从该文件中消失。正常的 libsass 行为是否会从媒体查询中的代码中删除换行符？

Answer 1

这是 libsass 中的一个错误 - 在 https://github.com/sass/libsass/issues/1103 中报告：libsass 开发人员计划在其 3.4 版本中解决空白问题。

Answer 2

如果 gulp-sass 建立在 node-sass 之上，您也可以运行进入 outputStyle 选项，默认设置为 nested。嵌套值将执行上面在转译后的 CSS 中发生的事情：

.btn {
   font-size: 12px; }

libsass 不保留嵌套样式中的新行：https://github.com/sass/libsass/issues/552

为避免这种情况，将选项 outputStyle: expanded 传递给 node-sass 例如，您的 CSS 将正常输出：

.btn {
   font-size: 12px; 
}

如果使用 sass-loader for webpack，只需将以下内容添加到您的 webpack 配置中：

sassLoader: {
  outputStyle: 'expanded'
}

可以在此处找到更多文档：

https://github.com/sass/node-sass https://github.com/jtangelder/sass-loader

当我在媒体查询中 @import 一个 SCSS 文件时，为什么 gulp-sass 删除了换行符？

Why is gulp-sass removing line breaks when I @import a SCSS file inside a media query?

css

sass

gulp

gulp-sass

libsass