-webkit-box-orient：垂直；在 sass 中没有在 gulp 中编译答案

【问题标题】：-webkit-box-orient: vertical; in sass is not compiled in gulp-webkit-box-orient：垂直；在 sass 中没有在 gulp 中编译
【发布时间】：2017-08-15 12:09:24
【问题描述】：

在 sass 文件中

h3 {
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                line-height: 24px; 
                max-height: 24px;
                -webkit-line-clamp: 1; 
                -webkit-box-orient: vertical;
            }

运行 gulp 任务后，进入 css as

 .article-list.search .article-listings__item h3 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  line-height: 24px;
  max-height: 24px;
  -webkit-line-clamp: 1;
}

css 文件中缺少样式-webkit-box-orient: vertical;。

我对 sass 编译的 gulp 任务是

gulp.task('styles', function() {
  return sass('src/assets/stylesheets/index.scss', { style: 'expanded' })
    .pipe(autoprefixer('last 2 version'))
    .pipe(gulp.dest('dist/styles'))
    .pipe(rename({ suffix: '.min' }))
    .pipe(cleanCSS())
    .pipe(gulp.dest('dist/styles'))
    .pipe(notify({ message: 'Styles task complete' }));
});

【问题讨论】：

使用的 sass 版本是 gulp-ruby-sass: 2.1.1

标签： css sass gulp

【解决方案1】：

添加这行代码就可以正常工作了：

/* autoprefixer: off */

-webkit-box-orient: vertical;

/* autoprefixer: on */

【讨论】：

【解决方案2】：

在Github 上查看这个问题。

像这样配置自动前缀。希望对你有帮助。

autoprefixer({
  remove: false,
  browsers: ['last 2 versions']
})

【讨论】：