search

vuejs / rfcs

RFCs for substantial changes / feature additions to Vue core
4.85k stars 551 forks source link

BUG: in SCSS #361

Closed iDerekLi closed 3 years ago

iDerekLi commented 3 years ago

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>

image

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>

image

Originally posted by @iDerekLi in https://github.com/vuejs/rfcs/issues/231#issuecomment-886330778

posva commented 3 years ago

Open an issue in vue-next with an actual repro