javascript - 如何在 Nuxt 中使用动态 CSS 文件?
问题描述
我正在一个项目中工作,该项目有不同的用户和他们的徽标。基于 API 调用,我想使用不同的调色板加载不同的 CSS。
现在我在文件夹中有一个css
文件assets
夹main.js
(带有我的自定义字体样式等)和另一个用于自定义调色板的文件:<color-name>-palette.css
.
在我nuxt.config
的我这样称呼CSS颜色:
css: [
'~/assets/style/app.styl',
'~/assets/css/main.css',
'~/assets/css/orange-palette.css'
],
有没有办法根据 URL 路径/API 调用绑定 CSS 文件,而不是将路径放在那里?
我不确定我是否也可以在模板上使用它,在那里绑定 CSS 文件。可能吗?
谢谢
解决方案
要动态加载 CSS 文件,请head()
使用head: {}
. 这样,值可以是动态的。在https://codesandbox.io/s/l4on5508zm上查看下面的代码和工作演示
<template>
<section>
<h1>Index</h1>
<button @click="swap">swap</button>
<p v-text="cur" />
</section>
</template>
<script>
export default {
head() {
return {
link: [
{
rel: "stylesheet",
href: `/${this.cur}.css`
}
]
};
},
data() {
return {
cur: "light"
};
},
methods: {
swap() {
if (this.cur === "light") {
this.cur = "dark";
} else {
this.cur = "light";
}
}
}
};
</script>
查看上面的代码片段,您可以通过 head() 函数引入要在页面上动态使用的 css 文件。您可以根据用户交互(例如我的按钮单击交互)在任何页面上即时更改要使用的 CSS。
推荐阅读
- reactjs - 未正确显示图标
- php - 如何将关联数组导出为 CSV?
- amazon-web-services - AWS Data Pipeline 无法验证 S3 访问 [权限警告]
- reactjs - react hooks 引用值如何传递给依赖数组?
- reactjs - react js中登录或注册后如何推送用户到首页?
- objective-c - 如何修复''预期';' 在顶级声明符之后”和“未知类型名称‘类’?
- php - 使用来自客户端的新信息登录(提交表)后将用户添加到新表中
- ansible - 如何在 ansible-console 中注册变量?
- java - java.sql.SQLException:连接 org.postgresql.jdbc.PgConnection 已关闭
- angular - RxJS 中带有延迟和防闪烁的加载指示