Compass 在压缩 SCSS 文件时删除分号，导致 CSS 导入问题答案

【问题标题】：Compass removes semicolon when compressing SCSS files, causing issue of CSS importingCompass 在压缩 SCSS 文件时删除分号，导致 CSS 导入问题
【发布时间】：2015-08-25 12:10:45
【问题描述】：

这是我第一次尝试 Compass，遇到了 Compass 如何压缩 SCSS 文件的问题。

我有一个简单的.scss 文件，其中包含以下代码：

@import url('//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css');

.fa-apple, .fa-android, .fa-twitter {
    font-size: 60px;
}

我设置了一个Gulp 任务来编译文件，这里是任务：

gulp.task('compass', function() {
    gulp.src('app/scss/style.scss')
        .pipe(compass({
            config_file: './config.rb',
            css: 'app/css',
            sass: 'app/scss',
            require: ['susy', 'breakpoint']
        }))
        .pipe(gulp.dest('app/css'));
});

这是我的config.rb：

require 'susy'
require 'breakpoint'

project_type = :stand_alone
http_path = "/"
sass_dir = "app/scss"
css_dir = "app/css"
images_dir = "app/images"
fonts_dir = "app/fonts"
javascript_dir = "app/js"
line_comments = true
preferred_syntax = :scss
output_style = :compressed
relative_assets = true

所以我将output_style 设置为:compressed 以缩小CSS 结果。这是我在结果css 文件中得到的：

@import url("//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css").fa-apple,.fa-android,.fa-twitter{font-size:60px}

Compass 删除了@import 语句的结尾分号，这会导致页面上出现意外的样式。

当我将output_style 更改为:expanded 时，该页面与未缩小的css 版本配合良好，因为保留了分号。

有没有办法避免Compass 删除分号？还有为什么会这样？

【问题讨论】：

标签： css gulp compass gulp-compass

【解决方案1】：

sass 的最新版本（3.4.17 或 3.4.18）似乎正在这样做。

试试这个：

gem uninstall sass
gem install sass -v 3.4.16

它对我有用。如果您想尝试其他版本，可以在这里找到all versions of sass。

【讨论】：

很好的答案！在这上面浪费了这么多时间！谢谢！

【解决方案2】：

听起来像是fixed in 3.4.18。

【讨论】：

是的，刚刚测试过。在 3.4.18 中再次工作。谢谢！

【解决方案3】：

指南针不应该将导入文件的代码呈现为 css 吗？

【讨论】：

不，如果它是另一个 css 资源（以 URL 的形式）它正在导入，我猜。