Feature Request: add custom SASS variables to webpack

[Morgan Benton]

In my .storybook/webpack.config.js file, I was able to import my custom SASS variables like this:

const path = require('path')

module.exports = async ({ config }) => {
  config.resolve.alias['~storybook'] = path.resolve(__dirname)
  config.resolve.alias['@'] = path.resolve(__dirname, '..', 'src')

  config.module.rules.push({
    resourceQuery: /blockType=story/,
    loader: 'vue-storybook'
  })

  config.module.rules.push({
    test: /\.s(a|c)ss$/,
    use: [
      'style-loader',
      'css-loader',
      {
        loader: 'sass-loader',
        options: {
          prependData: `@import '${path.resolve(__dirname, '..', 'src', 'scss')}/variables.scss'`
        }
      }
    ],
    include: [
      path.resolve(__dirname, '../'),
    ],
  })

  return config
}

This works for my particular setup, but not everyone will define their custom variables like I have. I suggest that this plugin should be updated to do the same thing that vue-cli-plugin-vuetify does, which is to detect whether custom variables are saved in src/(sass|scss|styles)/variables.s(c|a)ss and load them appropriately.