Loading a global scss mixin / variable file in version 3

Hi

How does one achieve this - Loading a global settings file

{
  loader: 'sass-resources-loader',
  options: {
    resources: path.resolve(__dirname, '../src/style/_variables.scss')
  }
}

using vue-cli 3.0.0-beta.6?

From information in the readme, I thought something like this in vue.config.js:

css: {
  loaderOptions: {
    sass :
    {
      loader: 'sass-resources-loader',
      options: {
        resources: path.resolve(__dirname, 'src/scss/_variables.scss'),
      },
    },
  }
}

will do the trick. But I’m getting an error if I try to use a a variable (e.g. $primary) in a component:

color: $primary;
      ^
  Undefined variable: "$primary".
  in /src/App.vue (line 23, column 12)

[bbugh]

Note that this preprocessor-loader is not hot reloaded. You’ll have to shut down and restart the server if you make changes to see them.

[krienow]

See: https://github.com/vuejs/vue-cli/blob/dev/docs/guide/css.md#passing-options-to-pre-processor-loaders

EDIT: Fixed the link.