1

我正在尝试迁移我的网站以使用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 行为是否会从媒体查询中的代码中删除换行符？

4

2 回答 2

1

如果 gulp-sass 构建在 node-sass 之上，您还可能会遇到默认设置为嵌套的outputStyle选项。嵌套值将执行上面转换后的 CSS 中发生的事情，如下所示：

.btn {
   font-size: 12px; }

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

为避免这种情况，例如将选项outputStyle: 扩展为 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

于 2016-06-25T02:48:18.763 回答
0

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

于 2015-04-16T10:05:55.337 回答