Question

嗨，大家好我在postcss布局中尝试使用font-awesome，但似乎无法正常工作。所以我尝试用帖子安装sass，看它是否会起作用，但我不知道如何去做。

我已经安装了npm gulp for sass

这是我的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'));
});

在Gulp中使用带有Sass的PostCSS来运行font-awesome

1 个答案: