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

<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>

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