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

如果gulp-sass构建在node-sass之上，您可能还会遇到 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

Answer 2

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

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

2 个答案: