字体真棒css上的gulp错误

Question

我一直在做一个反应项目。当我添加react-fa组件作为节点模块时，我的gulp开始抛出一个错误，我之后做的更改没有反映在已发布的文件夹中。

这是我的控制台

这是我得到的错误

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

这是我的gulp js进口和配置

"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'
    }
}

这是css的gulp任务

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

我尝试添加gulp-concat-css节点模块，并在任务中使用concatCss而不是concat。但仍然得到相同的错误，而css也没有缩小。

我甚至尝试从css文件的路径中删除字体 - 令人敬畏的CSS也要缩小。但仍然得到同样的错误。

我坚持了下来。请帮我弄清问题是什么并修复它，以便gulp任务能够成功运行。

Answer 1

如果你在dist / css中打开你提取的.fc-scroller { height: auto!important; overflow-y: auto; ，你会在@ font-face的第一个块中看到src指向寻找字体的位置。在dist / fonts中该目录中必须有相应的字体。

你没有用gulp提取你的字体真棒字体。您在配置中有字体的路径，但您应该添加这个gulp任务：

font-awesome.css