javascript - 如何在 Nuxt 中使用动态 CSS 文件？

Question

我在一个元素中工作，该元素有不同的用户使用他们的 Logo 。基于 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 调用来绑定(bind) CSS 文件，而不是将路径放在那里？

我不确定我是否也可以在模板上使用它，在其中绑定(bind) CSS 文件。可能吗？

谢谢

Answer 1

要动态加载 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。