Vue-cli: CSS variables not compiling sass variables

[joshuajohnson814]

Version

3.0.0-beta.6

Reproduction link

https://codesandbox.io/s/18k1ormynl

Steps to reproduce

Usage of CSS Variables inside of a scoped component is not compiling SCSS variables used with a CSS variable.

HelloWorld.vue

<style lang="scss" rel="stylesheet/scss" scoped>
h3 {
  color: var(--h3-color, blue);
}

App.vue

<style lang="scss">
$variable-name: red;
#app {
  --h3-color: $variable-name;
}

The compiled css results is --h3-color: $variable-name; as shown in Chrome when it is expected to be --h3-color: red;

What is expected?

The css variable instance is expected to compile the sass variable into the resolved value.

What is actually happening?

The scss variable is not being compiled.

---

I wasn't able to get the cli 3 beta 6 running with code sandbox but you can see the file changes I made in my steps to reproduce. I'm running that code locally and seeing the issue.

[LinusBorg]

Plesase provide an actual reproduction. codesandbox doesn't use vuze-cli 3 so doesn't count ;)

[soft903]

@joshuajohnson814 ,
for SCSS / SASS with CSS variable
--h3-color: #{$variable-name};

[joshuajohnson814]

@soft903 thanks that worked. closing this issue.