Использование PostCSS с Sass в Gulp для запуска font-awesome

Привет, ребята, я пытаюсь использовать font-awesome в своем макете postcss, но, похоже, это не работает. Поэтому я попытался установить sass с сообщениями, чтобы посмотреть, будет ли он работать, но я не знаю, как это сделать.

Я уже установил npm gulp для 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'));
});

person Arthur Decker    schedule 10.02.2016    source источник


Ответы (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'));
});
person sglazkov    schedule 10.02.2016
comment
на самом деле я использовал postcss-font-awesome github.com/dan-gamble/postcss-font- круто но все еще не работает - person Arthur Decker; 11.02.2016
comment
я обновляю ответ, может возникнуть проблема с путем шрифта - person sglazkov; 11.02.2016
comment
На самом деле это мой плагин :) Я не уверен, упоминаю ли я его в README, но вам все равно нужно ссылаться на файлы шрифтов. Обычно я делаю это, ссылаясь на CDN (maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/), в то время как неэффективный делает свою работу. - person Dan Gamble; 19.09.2016