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>
这是为什么?要怎么设置?
回答:
scss
才支持这样的注释
npm install sass --save
<style lang="scss">...
就可以了
回答:
位于 <style> 元素内的 CSS 注释,以 /* 开始,以 */ 结束,请使用正确用法
Vue 会将模板编译成高度优化的 JavaScript 代码,猜测写在上面是按JS的注释语法来编译了
回答:
CSS,只有如下这一种注释方法,//不是有效的注释方便,你就是直接写在css文件中,浏览器也会让下CSS代码失效
https://developer.mozilla.org/zh-CN/docs/Web/CSS/Comments
以上是 vite 刚创建的项目为什么 style 中这样写注释为什么会报错? 的全部内容, 来源链接: utcz.com/p/934031.html