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

Question

我正在尝试迁移我的站点以使用 gulp-sass 编译 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

如果 gulp-sass 构建在 node-sass 之上，您可能还会遇到设置为 nested< 的 outputStyle 选项/em> 默认。嵌套值将执行上面在转译后的 CSS 中发生的事情:

.btn {
   font-size: 12px; }

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

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

.btn {
   font-size: 12px; 
}

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

sassLoader: {
  outputStyle: 'expanded'
}

更多文档可以在这里找到:

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