我想有动态配色方案到我的网页。根据网址,我发送一个API请求,从数据库中获取配色方案。
为此,我在nuxtServerInit存储挂钩中获取颜色,然后使用CSS中的v-bind()
动态地为组件着色。
有关参考,请访问https://vuejs.org/api/sfc-css-features.html#css-modules。例如:
#main-container {
max-width: 500px;
margin: auto;
background-color: v-bind('designTemplate.backgroundColor');
}
在这里,designTemplate是一个计算变量,它从存储中获取值。
我使用的是SSG。在检查生成的文件时,我可以看到颜色没有绑定到CSS,服务器呈现的页面没有所需的颜色。
在生成的文件中,我看到.class-name[data-v-15114cda]{background-color:var(--fec1f67e)}
但是css变量fec1f7e在文件中找不到,只有在水合过程中才会实际应用颜色。
1条答案
按热度按时间bkhjykvo1#
更新:解决了问题。使用了另一种方法来完成我的要求。
我没有在css中使用v-bind,而是创建了根级别的css变量,这是在页面的head部分完成的。
有了这些,我就可以在所有文件中访问这些变量,并将它们设置为:
css变量被注入到html的头部,通过服务器端生成,我得到了一个颜色正确的服务器渲染页面。