Error compiling vue extensions and scss

Error while trying to compile vue & scss files with laravel mix.

Same files still works perfectly with gulp.

webpack.mix.js

let mix = require('laravel-mix').mix;
mix.js('resources/assets/js/trade.modal.js', 'public/build/js')
    .sass('resources/assets/sass/rapid.recon.scss', 'public/build/css')

package.json

 {
  "private": true,
  "scripts": {
    "prod": "gulp --production",
    "dev": "node node_modules/cross-env/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch": "node node_modules/cross-env/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "hot": "node node_modules/cross-env/bin/cross-env.js NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
    "production": "node node_modules/cross-env/bin/cross-env.js NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
  },
  "devDependencies": {
    "axios": "^0.15.2",
    "babel-preset-es2015": "6.9.0",
    "gulp": "^3.9.1",
    "jquery": "^2.2.0",
    "jquery-daterangepicker": "1.3.0",
    "js-cookie": "^2.1.2",
    "laravel-elixir": "^6.0.0-15",
    "laravel-elixir-browserify-official": "^0.1.3",
    "laravel-elixir-vue-2": "^0.3.0",
    "laravel-elixir-webpack-official": "^1.0.10",
    "laravel-mix": "^0.5.0",
    "lodash": "^4.16.2",
    "vue": "^2.1.10",
    "vue-resource": "^1.0.3",
    "vue-touch": "^1.1.0",
    "vue-template-compiler": "^2.1.10"
  },
  "dependencies": {
    "anicollection": "^1.0.0",
    "foundation-emails": "github:zurb/foundation-emails#develop",
    "foundation-sites": "^6.3.0",
    "gulp-inline-css": "^3.1.0",
    "gulp-replace": "^0.5.4",
    "hammerjs": "^2.0.8",
    "highcharts": "^5.0.6",
    "inky": "^1.3.7",
    "jquery.maskedinput": "^1.4.1",
    "moment": "^2.17.1",
    "motion-ui": "^1.2.2",
    "raven-js": "^3.8.1",
    "select2": "^4.0.3",
    "siphon-media-query": "^1.0.0",
    "tether": "^1.3.4",
    "vue-router": "^2.1.1"
  }
}

Error with scss :

in ./resources/assets/sass/rapid.recon.scss

Module parse failed: /home/bobby/web/rapidrecon/resources/assets/sass/rapid.recon.scss Unexpected character '@' (3:0)
You may need an appropriate loader to handle this file type.
| // Variables
| 
| @import "settings";
| @import "settings.rapid.recon";
| @import "date-range-picker";

Error with vue files

error  in ./resources/assets/js/components/trade/modal/additional-features-information.vue

Module parse failed: /home/bobby/web/rapidrecon/resources/assets/js/components/trade/modal/additional-features-information.vue Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| <template>
| 
|     <div class="slide">

[brandonferens]

There were a couple small issues that @JeffreyWay worked out earlier today. The other thing I did was just remove my node_modules directory and just reinstall via npm install.

[andredewaard]

I just had the same error only to see after 2 hours that Laravel-mix breaks on ‘background-image: url(’‘);’