Gulp erreur sur la police génial css

Question

J'ai travaillé sur un projet de réaction. Lorsque j'ai ajouté le composant react-fa en tant que module de noeud, mon gulp a commencé à générer une erreur et les modifications que j'ai apportées par la suite ne sont pas reflétées dans le dossier publié.

Voici ma console

C'est l'erreur que je reçois

E:\Ajanth\sample\node_modules\font-awesome\css\font-awesome.css:7 
@font-face { 
^ 
ParseError: Unexpected character '@' 

Voici mes importations de Gulp et config

"use strict"; 

var gulp = require('gulp'); 
var connect = require('gulp-connect'); //Runs a local dev server 
var open = require('gulp-open'); //Open a URL in a web browser 
var browserify = require('browserify'); // Bundles JS 
var reactify = require('reactify'); // Transforms React JSX to JS 
var source = require('vinyl-source-stream'); // Use conventional text streams with Gulp 
var concat = require('gulp-concat'); //Concatenates files 
var lint = require('gulp-eslint'); //Lint JS files, including JSX 

var config = { 
    port: 9005, 
    devBaseUrl: 'http://localhost', 
    paths: { 
     html: './src/*.html', 
     js: './src/**/*.js', 
     images: './src/images/*', 
     css: [ 
      'node_modules/bootstrap/dist/css/bootstrap.min.css', 
      'node_modules/bootstrap/dist/css/bootstrap-theme.min.css', 
      'node_modules/toastr/toastr.css', 
      'node_modules/font-awesome/css/font-awesome.css', 
      './src/css/custom.css', 
      'node_modules/react-data-components/css/table-twbs.css' 
     ], 
     dist: './dist', 
     fonts: 'node_modules/font-awesome/fonts/*', 
     mainJs: './src/main.js' 
    } 
} 

Voici la tâche engouffreur pour css

gulp.task('css', function() { 
    gulp.src(config.paths.css) 
     .pipe(concat('bundle.css')) 
     .pipe(gulp.dest(config.paths.dist + '/css')); 
}); 

J'ai essayé d'ajouter le module de noeud gulp-concat-css et utilisé concatCss au lieu de concat dans la tâche. Mais toujours obtenir la même erreur et le CSS n'est pas minifié aussi.

J'ai même essayé de supprimer le css font-awesome du chemin des fichiers css à minifier. Mais toujours obtenir la même erreur.

Je suis coincé avec. S'il vous plaît, aidez-moi à comprendre le problème et à le résoudre afin que la tâche de gulp se déroule correctement.

Answer 1

Si vous ouvrez votre font-awesome.css extrait dans dist/css, vous verrez dans le premier bloc dans @ font-face où le src pointe vers la recherche des polices. Il doit y avoir les polices correspondantes dans ce répertoire dans dist/fonts.

Vous n'êtes pas en train d'extraire vos polices font-awesome avec gulp. Vous avez le chemin dans votre config pour les polices, mais vous devez ajouter cette tâche de gulp:

gulp.task('fonts', function() { 
    gulp.src(config.paths.fonts) 
     .pipe(gulp.dest(config.paths.dist + '/fonts')); 
});