Feature Request: Resource Scope

[rizqirizqi]

Problem

I have a use case where I need to separate scss variables to become modular. With the current implementation, if I have two files and there are conflicting variables, I can't do anything to make it work together while using this package.

Proposal

nuxt.config.js:

export default {
  buildModules: ['@nuxtjs/style-resources'],
  styleResources: {
    scss: { // allow object as config and use the key as module name
      foo: './assets/foo/vars/*.scss',
      bar: './assets/bar/vars/*.scss',
    },
  },
}

assets/foo/vars/_colors.scss:

$gray: #333;

assets/bar/vars/_colors.scss:

$gray: #444;

components/Test.vue:

<template>
  <div class="something">Test</div>
</template>

<style lang="scss">
  .something {
    color: $foo-gray; // will be resolved to #333
  }
</style>

components/AnotherTest.vue:

<template>
  <div class="anotherthing">Test</div>
</template>

<style lang="scss">
  .anotherthing {
    color: $bar-gray; // will be resolved to #444
  }
</style>