Динамическая таблица стилей Nuxt config - PullRequest
Новая
       40

Динамическая таблица стилей Nuxt config

0 голосов
/ 15 мая 2018

Как мне выполнить динамическую загрузку таблицы стилей (в Nuxt.js) на основе нажатия кнопки пользовательского интерфейса.

Например, у меня есть это в моем nuxt.config.js: 

let org = 'default';

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

Я опустил часть кода из этого блока, но вы видите основной код, необходимый для ответа на мой вопрос.

По сути, у меня есть кнопка пользовательского интерфейса, которую я бы хотел щелкнуть,чтобы изменить значение 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>

1 Ответ

0 голосов
/ 17 февраля 2019

Для этого.Вам необходимо определить 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>

Глядя на фрагмент кода выше, вы можете вставить файл css для динамического использования на своей странице с помощью функции head().Подумайте об этом и посмотрите демонстрацию на https://codesandbox.io/s/l4on5508zm

...