When using CSS modules, why might this not work in a global context?

Question

core.scss

:global {

  $color-white: #fff;
  $color-primary: #6d5cae;
  $color-black: #000;
  $mix-percentage-dark: 81%;

  @mixin button($text-color, $background-color, $border-color) {
    .open .dropdown-toggle#{&} {
      background-color: mix($background-color, $color-black, $mix-percentage-dark);
      border-color: mix($background-color, $color-black, $mix-percentage-dark);
      color: $text-color;
    }
  }

  .btn-primary {
    @include button($color-white, $color-primary, $color-primary);
  }

}

WebPack Configuration:

webpackConfig.module.loaders.push({
  test: /\.scss$/,
  include: cssModulesRegex,
  loaders: [
    'style?sourceMap',
    'css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss-loader',
    'resolve-url',
    'sass?sourceMap'
  ]
})

Error:

Module build error: CssSyntaxError: postcss-modules-local-by-default: src / styles / core.scss: 1: 0: Missing space before: global: global {