Question

我正在一个有不同用户徽标的项目中工作。基于API调用，我想使用不同的调色板加载不同的CSS。

现在，我在css文件夹中有一个assets文件夹，其中有main.js（带有我的自定义字体样式等），还有一个用于自定义调色板的文件：{{1} }。

在我的<color-name>-palette.css中，我这样称呼CSS颜色：

nuxt.config

是否有任何方法可以根据URL路径/ API调用来绑定CSS文件，而不是将路径放在此处？

我不确定是否也可以在模板上使用它，并在那里绑定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。

Answer 2

您可以在页面组件中使用“ head”。 https://codesandbox.io/s/xr55o4yqmq

<script>
export default {
  head: {
    link: [
      {
        rel: "stylesheet",
        href: "/about.css"
      }
    ]
  }
};
</script>

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

2 个答案: