BUG: in SCSS

[iDerekLi]

BUG: in SCSS

System Info

 OS: Windows 11
   CPU: (8) x64 AMD Ryzen 5 3500U with Radeon Vega Mobile Gfx
   Memory: 535.72 MB / 6.94 GB
 Binaries:
   Node: 12.15.0 - C:\Program Files\nodejs\node.EXE
   Yarn: 1.22.5 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
   npm: 6.13.4 - C:\Program Files\nodejs\npm.CMD
 Browsers:
   Edge: Spartan (44.22000.1.0), Chromium (91.0.864.67)
   Internet Explorer: 11.0.22000.1
 npmPackages:
   "sass": "^1.26.5",
   "sass-loader": "^8.0.2"
 vueCLI:
    @vue/cli 4.5.13

CSS

css parsed variables are normal.

<script setup>
const width = 123;
</script>
<style scoped>
.canvas {
  position: relative;
  width: v-bind(width + "px");
  box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.2);
  background: #ffffff;
}
</style>

SCSS

scss parsing variables are not equal.

<script setup>
const width = 123;
</script>

<style lang="scss" scoped>
.canvas {
  position: relative;
  width: v-bind(width + "px");
  box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.2);
  background: #ffffff;
}
</style>

Originally posted by @iDerekLi in #231 (comment)

[posva]

Open an issue in vue-next with an actual repro