Gulp - 構文解析中に予期しない文字 '@'（1：0）\ main.scss

Question

私はgulpをインストールしました。これは私が得るエラーです。誰かが私を助けてくれますか？

node_modulesを削除しようとしましたが、npm-installを実行しました。しかしそれはまだ仕事をしません。

これは私のgulpfileの様子です。

var gulp = require('gulp'); 
var gutil = require('gulp-util'); 
var browserify = require('browserify'); 
var babelify = require('babelify'); 
var scssify = require('scssify'); 
var source = require('vinyl-source-stream'); 
var path = require('path'); 
var spawn = require('child_process').spawn; 
var gls = require('gulp-live-server'); 
var commandLineArgs = require('command-line-args'); 
var sass = require('gulp-sass') ; 
var notify = require("gulp-notify") ; 
var bower = require('gulp-bower'); 
var runSequence = require('run-sequence'); 
var lodash = require('lodash'); 

var config = { 
    sassPath: './gssp/client/style', 
    bowerDir: './bower_components' 
}; 

function onError(error) { 
    gutil.log(error.message); 
    console.log(error.toString()); 
} 

var cli = commandLineArgs([ 
    { name: 'packages', alias: 'p', type: String, defaultValue: [""], multiple:true } 
]); 

var options = cli.parse(); 

gulp.task('bower', function() { 
    return bower() 
     .pipe(gulp.dest(config.bowerDir)) 
}); 

gulp.task('icons', function() { 
    return gulp.src(config.bowerDir + '/font-awesome/fonts/**.*') 
     .pipe(gulp.dest('./dist/fonts')); 
}); 

gulp.task('embeddedIcons', function() { 
    return gulp.src('./gssp/src/leafs/icon/fonts/**.*') 
     .pipe(gulp.dest('./dist/src/leafs/icon/fonts')); 
}); 

gulp.task('css',['bower'], function() { 
    return gulp.src(config.sassPath + '/*.scss') 
    .pipe(sass({ 
      outputStyle: 'compressed', 
      includePaths: [ 
       './gssp/client/style', 
       config.bowerDir + '/bootstrap-sass/assets/stylesheets', 
       config.bowerDir + '/font-awesome/scss', 
      ] 
     }) 
     .on('error', sass.logError)) 
     .pipe(gulp.dest('./dist/css')); 
}); 

gulp.task('runLiveServer', function() { 
    var server = gls.new(['gssp/index.js', options.packages.join(" ")]); 
    server.start(); 

    gulp.watch(['./core/**/*.js','./gssp/**/*.scss'], ['build']); 

    gulp.watch(['./dist/bundle.js'], function (file) { 
     server.notify.apply(server, [file]); 
    }); 
}); 

gulp.task('copyStatics', function() { 
    return gulp.src('./core/server/public/**/*.*') 
     .pipe(gulp.dest('./dist')); 
}); 


gulp.task('build',['copyStatics', 'icons', 'embeddedIcons', 'css'], function() { 
    return browserify({ 
     entries: './gssp/client/index.js', 
     extensions: ['.jsx', '.js'], 
     debug: true 
    }) 
      .transform("babelify", {presets: ["es2015", "react", "stage-0"]}) 
     .bundle() 
     .on('error', onError) 
     .pipe(source('bundle.js')) 
     .pipe(gulp.dest('./dist')); 
}); 

gulp.task('run-wrapper', function(done) { 
    var server = spawn('node', ['serviceWrapper.js'], {stdio: ['inherit']}); 
    server.stderr.on('data', function(data){ 
     process.stderr.write(data); 
    }); 

    server.stdout.on('data', function(data) { 
     process.stdout.write(data); 
    }); 
    server.unref(); 
}); 

gulp.task('run', function(done) { 
    console.log(lodash.concat); 
    var child = spawn('node', lodash.union(['gssp/index.js'], options.packages), {stdio: ['inherit']}); 

    child.stderr.on('data', function(data){ 
     process.stderr.write(data); 
    }); 

    child.stdout.on('data', function(data) { 
     process.stdout.write(data); 
    }); 
}); 

gulp.task('watch', function() { 
    gulp.watch('./gssp/src/**/*.{js,jsx}', ['build']); 
    gulp.watch('./gssp/src/**/*.scss', ['build']); 
}); 

gulp.task('serve', function(done) { 
    runSequence('build', ['run-wrapper', 'runLiveServer'],done) 
}); 

gulp.task('start', function(done) { 
    runSequence('build', ['run-wrapper', 'run'], done); 
}); 

gulp.task('default', ['start']); 

これは私のバワーファイルの外観です。

{ 
    "name": "gssp-sales", 
    "main": "index.js", 
    "version": "0.6.0", 
    "authors": [ 
    "Vamshi Gudipati" 
    ], 
    "license": "MIT", 
    "ignore": [ 
    "**/.*", 
    "node_modules", 
    "bower_components", 
    "test", 
    "tests" 
    ], 
    "dependencies": { 
    "bootstrap-sass": "bootstrap-sass-official#~3.3.6", 
    "font-awesome": "fontawesome#~4.5.0" 
    } 
} 

私はgulpをインストールしていますが、これは私が得るエラーです。誰かが私を助けてくれますか？

node_modulesを削除しようとしましたが、npm-installを実行しました。しかしそれはまだ仕事をしません。

これは私のgulpfileが

Answer 1

どのように見えるかでは、DIST/CSSでのごfont-awesome.cssファイルを開き、srcが指している最初のブロックする@ font-faceでご覧ください。フォントを抽出した正しいディレクトリを指していることを確認してください。すばらしいフォントがあり、エラーは消えてしまいます。

私はgulpfileにこのような何かをしなければならなかった私にとっては

：

gulp.task('build-fonts', function(){ 
    return gulp.src(config.bowerDir + '/font-awesome/fonts') 
      .pipe(gulp.dest('./dist/fonts')); 
})