1

我刚刚为 SASS 设置了以下 Gulp 任务，使用 gulp-autoprefixer 导致处理字体真棒图标“内容”时出现问题。

它的工作方式（没有 gulp-autoprefixer）

gulp.task('sass', function() {

  gulp.src(['./src/vendor/style.scss',
        './src/app/style.scss'])
      .pipe(sourcemaps.init())
      .pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
      .pipe(concat('style.css'))
      .pipe(sourcemaps.write('./'))
      .pipe(gulp.dest('./public/css'));

});

这工作正常，它输出我期望的结果。

用户图标的示例（没有 gulp-autoprefixer）：

.fa-user:before {
    content: "";
}

它的破坏方式（使用 gulp-autoprefixer）

如果我现在将 autoprefixer 添加到此任务中-例如：

gulp.task('sass', function() {

  gulp.src(['./src/vendor/style.scss',
        './src/app/style.scss'])
      .pipe(sourcemaps.init())
      .pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
      .pipe(concat('style.css'))
      .pipe(prefix({
        browsers: ['> 1%', 'last 2 versions', 'Firefox ESR', 'Opera 12.1'],
        cascade: false
      }))
      .pipe(sourcemaps.write('./'))
      .pipe(gulp.dest('./public/css'));

});

现在输出中断。这是我为 fa-user (使用 gulp-autoprefixer)得到的：

.fa-user:before {
    content: "";
}

字符集（UTF-8 / UTF-16）似乎有问题。

是否有可能使用 gulp-autoprefixer 避免这种行为？

4

2 回答 2

1

Well, even it was a strange behavior (because it worked well without the gulp-autoprefixer), the solution was easier than I thought.

I've missed to add the UTF-8 charset meta-tag in the documents <HEAD>.

So this tag fixed it:

<meta charset="UTF-8">
于 2015-08-01T01:41:03.487 回答
0

我也遇到了这个问题，更改了 sass 编译器的顺序并为我修复了前缀。首先是前缀，然后是 sass 编译器：

.pipe( autoprefixer({ browsers: ['> 1%', 'last 3 versions'], cascade: false }) ) .pipe( sass({ outputStyle: 'compressed', includePaths: [] }).on('error', error) )

于 2018-03-29T09:27:41.760 回答