Question

如何根据点击的UI按钮动态加载样式表（在Nuxt.js中）。

例如，我在nuxt.config.js：

中有这个

let org = 'default';

module.exports = {
    css: [
        '~/assets/sass/' + org + '/index.scss',
    ]
};

我省略了这个块中的一些代码，但你看到的是回答我的问题所需的主要代码。

基本上，我有一个UI按钮，当我点击它时，我想更改org的值并让Nuxt加载该样式表来代替default。

我将如何做这样的事情？

我还在修改我的主.vue文件中的内容，如下所示：

export default {
   data() {
     return {
       skin: 'default',
     }
   },
   methods: {
     changeMe() {
       this.skin = 'other';
     }
   },
   head () {
      return {
        css: [
          '~/assets/sass/skins/' + this.skin + '/index.scss',
        ]
      }
   }
 }

此外，我可以通过这样做来包含我的default皮肤：

<style lang="scss" rel="stylesheet/scss">
  @import '~assets/sass/default/index';
</style>

这很糟糕我无法使用我的org数据变量并执行以下操作：

<style lang="scss" rel="stylesheet/scss">
  @import '~assets/sass/' + this.org + '/index';
</style>

Answer 1

为此。您需要为每个组织定义CSS文件。我只能想象这是CSS文件而不是scss文件。在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文件引入到动态在您的页面上使用的文件中。考虑一下并查看https://codesandbox.io/s/l4on5508zm

上的演示

Nuxt配置动态样式表

1 个答案: