vite 刚创建的项目为什么 style 中这样写注释为什么会报错？

Question

<template>
  <footer class="AppFooter">
    <h1>AppFooter</h1>
  </footer>
</template>

<style>
.AppFooter {
  position: absolute; // to body <--注释写在这里会报错
  bottom: 0;
}
</style>

08:42:21 [vite] Internal server error: D:/products/vue/learnerhub-vue3/src/components/AppFooter.vue:3:26: Unknown word
  Plugin: vite:vue
  File: D:/products/vue/learnerhub-vue3/src/components/AppFooter.vue:10:26
      at Input.error (D:\products\vue\learnerhub-vue3\node_modules\postcss\lib\input.js:148:16)
      at Parser.unknownWord (D:\products\vue\learnerhub-vue3\node_modules\postcss\lib\parser.js:540:22)
      at Parser.decl (D:\products\vue\learnerhub-vue3\node_modules\postcss\lib\parser.js:219:16)
      at Parser.other (D:\products\vue\learnerhub-vue3\node_modules\postcss\lib\parser.js:128:18)
      at Parser.parse (D:\products\vue\learnerhub-vue3\node_modules\postcss\lib\parser.js:72:16)
      at parse (D:\products\vue\learnerhub-vue3\node_modules\postcss\lib\parse.js:11:12)
      at new LazyResult (D:\products\vue\learnerhub-vue3\node_modules\postcss\lib\lazy-result.js:133:16)
      at Processor.process (D:\products\vue\learnerhub-vue3\node_modules\postcss\lib\processor.js:28:14)
      at doCompileStyle (D:\products\vue\learnerhub-vue3\node_modules\@vue\compiler-sfc\dist\compiler-sfc.cjs.js:17778:40)
      at Object.compileStyleAsync (D:\products\vue\learnerhub-vue3\node_modules\@vue\compiler-sfc\dist\compiler-sfc.cjs.js:17710:12) (x2)

注释写在 .APPFooter 上面就可以

<template>
  <footer class="AppFooter">
    <h1>AppFooter</h1>
  </footer>
</template>

<style>
// to body <-- 注释写在这里没问题
.AppFooter {
  position: absolute;
  bottom: 0;
}
</style>

这是为什么？要怎么设置？

Answer 1

scss 才支持这样的注释

npm install sass --save

<style lang="scss">
...

就可以了

Answer 2

位于 <style> 元素内的 CSS 注释，以 /* 开始，以 */ 结束，请使用正确用法
Vue 会将模板编译成高度优化的 JavaScript 代码，猜测写在上面是按JS的注释语法来编译了

Answer 3

CSS,只有如下这一种注释方法，//不是有效的注释方便，你就是直接写在css文件中，浏览器也会让下CSS代码失效

https://developer.mozilla.org/zh-CN/docs/Web/CSS/Comments