在CSS变量中使用SCSS变量无效

<template>
  <!-- Your template -->
</template>

<script>
  export default {
    layout: 'blog'
    // page component definitions
  }
</script>

在SCSS中定义了一个变量，但是在CSS中使用SCSS中定义的变量无效:

$color: #f00;

:root {
  --text-color: $color; /** 无效 */
}

使用#{}Interpolation插值来解决此问题:

$color: #f00;

:root {
  --text-color: #{$color};
}