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代码失效

vite 刚创建的项目为什么 style 中这样写注释为什么会报错?
https://developer.mozilla.org/zh-CN/docs/Web/CSS/Comments

以上是 vite 刚创建的项目为什么 style 中这样写注释为什么会报错? 的全部内容, 来源链接: utcz.com/p/934031.html

回到顶部