Overwriting Foundation Sass Variables in React App

I'm currently trying to create my own React app and style it with Foundation. I'm trying to overwrite some of the Foundation Sass variables but it does not seem to have any effect.

My main .scss file looks like this:

@import "~foundation-sites/scss/foundation";
@include foundation-everything;

p {
  color: darkslategrey;
}

$topbar-background: green !default;

$button-radius: 3px !default;

and my `webpack.config.js file looks like this:

var webpack = require('webpack');

module.exports = {
  entry: [
    'script!jquery/dist/jquery.min.js',
    'script!foundation-sites/dist/foundation.min.js',
    './app/app.jsx'
  ],
  externals: {
    jquery: 'jQuery'
  },
  plugins: [
    new webpack.ProvidePlugin({
      '$': 'jquery',
      'jQuery': 'jquery'
    })
  ],
  output: {
    path: __dirname,
    filename: './public/bundle.js'
  },
  resolve: {
    root: __dirname,
    alias: {
      Main: 'app/components/Main.jsx',
      Nav: 'app/components/Nav.jsx',
      Team: 'app/components/page-components/Team.jsx',
      applicationStyles: 'app/styles/main.scss'
    },
    extensions: ['', '.js', '.jsx'],
    modulesDirectories: ['./node_modules']
  },
  module: {
    loaders: [
      {
        loader: 'babel-loader',
        query: {
          presets: ['react', 'es2015', 'stage-0']
        },
        test: /\.jsx?$/,
        exclude: /(node_modules|bower_components)/
      }
    ]
  },
  devtool: 'cheap-module-eval-source-map'
};

I've tried importing the _settings.scss file into main.scss but webpack gives an error stating that the file does not exist.

via Neill Herbst