scss vars in template

I was able to do this today using sass-resources-loader as per @sqal 's suggestion.

I changed vue-cli's familiar loaders block from the default:

loaders: { 
  sass: 'vue-style-loader!css-loader!postcss-loader!sass-loader?indentedSyntax=1', 
  scss: 'vue-style-loader!css-loader!postcss-loader!sass-loader', 
} 
...to the array/object syntax that you'd use in module.rules.use. Here's my entire block for vue-loader:

{
  test: /\.vue$/,
  use: {
    loader: 'vue-loader',
    options: {
      loaders: {
        sass: [
          'vue-style-loader',
          'css-loader',
          'postcss-loader',
          'sass-loader?indentedSyntax=1',
          {
            loader: 'sass-resources-loader',
            options: {
              resources: path.resolve(__dirname, 'app/src/renderer/styles/variables.scss'), // for example
            },
          },
        ],
        scss: [
          'vue-style-loader',
          'css-loader',
          'postcss-loader',
          'sass-loader',
          {
            loader: 'sass-resources-loader',
            options: {
              resources: path.resolve(__dirname, 'app/src/renderer/styles/variables.scss'), // for example
            },
          },
        ],
      },
    },
  },
},
Note that I also added postcss-loader but you don't have to, and that your resources can also be an array.

edit: So now any <style lang="scss"> (or sass) tag will have my variables.scss file available.