1

font-awesomeアイコン「コンテンツ」の処理に問題を引き起こすgulp-autoprefixerを使用して、SASS用に次のGulpタスクをセットアップしました。

仕組み (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

まあ、それは奇妙な動作でしたが (gulp-autoprefixer なしでうまく機能したため)、解決策は思ったより簡単でした。

UTF-8ドキュメントに charset メタタグを追加するのを忘れていました<HEAD>。

したがって、このタグはそれを修正しました：

<meta charset="UTF-8">
于 2015-08-01T01:41:03.487 に答える