RollupError when using scss inline "//" comments with a space in <style lang="scss"> block

[derrickb]

I realize this plugin is not maintained anymore but hopefully someone else has a suggestion.

TLDR; scss inline comments only work if there is no space after the "//"

My setup:

• "rollup": "^4.39.0"
• "@vitejs/plugin-vue2": "^2.3.3"
• "sass-embedded": "^1.86.3" <-- have tried "sass" and "node-sass" as well

I have .vue sfc files with style blocks like this:

<style scoped lang="scss">
#root {
  display: flex;
  // gap: 20px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
</style>

Note the space between "//" and "gap". Trying a build in Rollup produces this error:

[!] (plugin vite:vue2) RollupError: [plugin vite:vue2] src/LoadScreen.vue?vue&type=style&index=0&scoped=f313c3b4&lang.scss: /path/to/LoadScreen.vue:4:6: Unknown word gap

I spent hours trying different Rollup plugins, postCSS setups, etc. but could never get around this. Until, I coincidentally commented a line manually without a space after //, as opposed to doing cmd+/ and having VS Code do it. And it built fine.

I would still like to be able to use the default commenting behavior in VS Code. A workaround is to use "editor.comments.insertSpace": false in VS Code settings.

Does anyone have advice? I wonder if passing some options to vue/compiler-sfc would help, but there's very little documentation on this, especially for this vue2 plugin.

[derrickb]

After some more hours of tinkering, I found the solution. You need to set the postCSS SCSS parser in the style compiler options. This gets sent to vue/compiler-sfc. It works in either the syntax or parser properties.

Like this:

import vue from "@vitejs/plugin-vue2";
import sassParser from "postcss-scss";

...

vue({
  style: {
    postcssOptions: {
      syntax: sassParser, // or parser: sassParser
    },
  },
})