0

Hi guys am trying to use font-awesome in my postcss layout but it seems not to work. So i tried installing sass with posts to see if it will work but i do not know how to go about it.

I already installed npm gulp for sass

This is my gulp file configuration

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']);

And am trying to add this sass configuration

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'));
});
Arthur Decker
  • 1,191
  • 3
  • 15
  • 45

1 Answers1

1

Use this https://github.com/jonathantneal/precss or https://github.com/postcss/postcss-scss

example

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'));
});
sglazkov
  • 1,046
  • 1
  • 10
  • 38
  • i actually used postcss-font-awesome https://github.com/dan-gamble/postcss-font-awesome but still not working – Arthur Decker Feb 11 '16 at 02:00
  • i update answer, may be arise problem with font path – sglazkov Feb 11 '16 at 08:20
  • This is actually my plugin :) I'm not sure if i mention in the README but you still need to reference to font files. I tend to do that by linking to the CDN (https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css), while inefficient does the job. – Dan Gamble Sep 19 '16 at 14:48