Nuxt配置动态样式表

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查看演示