在 Gulp 中使用 PostCSS 和 Sass 来运行 font-awesome

Question

大家好，我正在尝试在我的 postcss 布局中使用 font-awesome，但它似乎不起作用。所以我尝试用帖子安装 sass 看看它是否可以工作，但我不知道该怎么做。

我已经为 sass 安装了 npm gulp

这是我的 gulp 文件配置

var gulp = require('gulp'),
  gutil = require('gulp-util'),
  webserver = require('gulp-webserver'),
  postcss = require('gulp-postcss'),
  autoprefixer = require('autoprefixer'),
  precss = require('precss'),
  cssnano = require('cssnano'),
  animation = require('postcss-animation'),
  sass = require('gulp-sass'),

  source = 'process/css/',
  dest = 'builds/postcss/';

gulp.task('html', function() {
  gulp.src(dest + '*.html');
});

gulp.task('css', function() {
  gulp.src(source + 'style.css')
  .pipe(postcss([
    precss(),
    animation(),
    autoprefixer(),
    cssnano()
  ]))
  .on('error', gutil.log)
  .pipe(gulp.dest(dest + 'css'));
});

gulp.task('watch', function() {
  gulp.watch(source + '**/*.css', ['css']);
  gulp.watch(dest + '**/*.html', ['html']);
});

gulp.task('webserver', function() {
  gulp.src(dest)
    .pipe(webserver({
      livereload: true,
      open: true
    }));
});

gulp.task('default', ['html', 'css', 'webserver','watch']);

我正在尝试添加这个 sass 配置

var gulp = require('gulp');
var postcss = require('gulp-postcss');
var sass = require('gulp-sass');

var autoprefixer = require('autoprefixer');
var cssnano = require('cssnano');

gulp.task('css', function () {
    var processors = [
        autoprefixer,
        cssnano
    ];
    return gulp.src('./src/*.scss')
        .pipe(sass().on('error', sass.logError))
        .pipe(postcss(processors))
        .pipe(gulp.dest('./dest'));
});

Answer 1

使用这个https://github.com/jonathantneal/precss 或https://github.com/postcss/postcss-scss

例子

var gulp = require('gulp');
var postcss = require('gulp-postcss');
var processors = [
    require('postcss-font-awesome')
    require('precss')
];

gulp.task('css', function () {
    gulp.src(['css/style.pcss'])
        .pipe(postcss(processors))
        .pipe(gulp.dest('css'));
});