Nuxt 配置动态样式表答案

【问题标题】：Nuxt config dynamic stylesheetNuxt 配置动态样式表
【发布时间】：2018-10-25 13:12:03
【问题描述】：

我将如何根据单击的 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>

【问题讨论】：

标签： javascript sass vuejs2 vue-component nuxt.js

【解决方案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>

查看上面的代码sn-p，你可以通过head()函数引入css文件在你的页面上动态使用。考虑一下并在https://codesandbox.io/s/l4on5508zm查看演示

【讨论】：