在Nuxt/Vue模板中更改身体样式
在Nuxt/Vue模板中更改身体样式
提问于 2021-05-10 19:47:12
我试图在Nuxt中添加身体样式到我的模板中，但是我遇到了一些问题。
我正在尝试使用beforeCreate调用，但是当我这样做时，我会遇到错误:文档没有定义。
我想保持SSR。如何在body元素上添加样式？
<script scoped>
export default {
head() {
return {
script: [
{
src: '/js/vendor/jquery.min.js'
},
{
src: '/js/site.js'
}
]
}
},
beforeCreate: function() {
document.body.className = 'service';
}
}
</script>
<style scoped>
@import '~/assets/css/style.min.css';
</style> 更新
我补充说：
head() {
return {
script: [
{
src: '/js/vendor/jquery.min.js'
},
{
src: '/js/site.js'
}
],
bodyAttrs: {
class: 'service',
}
}
}标签确实会添加到主体中：
<body class="service" data-n-head="%7B%22class%22:%7B%22ssr%22:%22service%22%7D%7D" style="zoom: 1;">但是，造型不呢？
body.service{padding-top:80px}
body.service{font-family:'Geomanist', sans-serif;color:#000}回答 2
Stack Overflow用户
回答已采纳
发布于 2021-05-10 19:52:52
看来你还可以说：
bodyAttrs: {
class: 'hidden',
},在nuxt.config.js中
根据这个answer，您可以在应用程序的根目录下创建一个app.html文件，内容如下。我已经将类直接添加到<body>中
<!DOCTYPE html>
<html {{ HTML_ATTRS }}>
<head {{ HEAD_ATTRS }}>
{{ HEAD }}
</head>
<body {{ BODY_ATTRS }} class="service">
{{ APP }}
</body>
</html>Stack Overflow用户
发布于 2021-05-11 00:57:16
我认为最好的处理方法是使用nuxt布局(https://nuxtjs.org/docs/2.x/directory-structure/layouts/)。基本上，您可以在布局文件(也是vue文件)的style secion中定义全局html或body样式，然后在页面中使用该布局(https://nuxtjs.org/docs/2.x/components-glossary/pages-layout/)。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/67476821
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号