Composing SCSS modules does not transpile the SCSS

[akanix42]

Version

3.0.0-beta.6

Reproduction link

https://github.com/nathantreid/vue-cli-composes-issue

Steps to reproduce

Create a scss module file with scss-specific syntax such as a variable (foo.module.scss):

$blue: blue;

.foo {
  color: $blue;
}

Compose it into your Vue file:

<style lang="scss" module>
.bar {
  composes: foo from './foo.module.scss';
}
</style>
<template>
  <div :class="$style.bar">test</div>
</template>

What is expected?

The SCSS should be transpiled, the style should be applied, and the text color should be blue.

What is actually happening?

The SCSS is pulled in untranspiled, so the CSS is invalid and is not applied.

---

The linked reproduction consists of 3 commits:

1. the inital vue-cli install commit
2. an autoformatting commit
3. the actual changes I made to reproduce the issue

[akanix42]

I've discovered that prefixing the composition path with sass-loader! does the trick, but it still shouldn't be necessary since these are .scss files. So this works:

<style lang="scss" module>
.bar {
  composes: foo from 'sass-loader!./foo.module.scss';
}
</style>