title: Gulp - Unexpected character '@' (1:0) while parsing style\main.scss
body: <p>I have gulp installed and this is the error that I get. Can someone help me out please?</p>
  
  <p>I have tried deleting the node_modules and did the npm-install. But it still doesnt work.</p>
  
  <p>This is how my gulpfile looks like.</p>
  
  <pre><code>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']);
  </code></pre>
  
  <p>This is how my bower file looks like.</p>
  
  <pre><code>{
    "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"
    }
  }
  </code></pre>
  
  <p>I have gulp installed and this is the error that I get. Can someone help me out please?</p>
  
  <p>I have tried deleting the node_modules and did the npm-install. But it still doesnt work.</p>
  
  <p>This is how my gulpfile looks like</p>