Question

我刚为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: "ï€‡";
}

似乎charset存在问题（UTF-8 / UTF-16）。

是否有可能通过gulp-autoprefixer避免这种行为？

Answer 1

嗯，即使这是一种奇怪的行为（因为它没有gulp-autoprefixer它运行良好），解决方案比我想象的要容易。

我错过了在UTF-8文档中添加<HEAD>字符集元标记。

所以这个标签修好了它：

<meta charset="UTF-8">

Answer 2

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

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

gulp autoprefixer提供无效的font-awesome图标内容

2 个答案: