Как использовать динамические CSS-файлы с Nuxt? - PullRequest
Новая
       9

Как использовать динамические CSS-файлы с Nuxt?

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

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

Теперь у меня есть папка css внутри папки assets с main.js (с моими пользовательскими стилями шрифтов и т. Д.) Идругие файлы для пользовательской цветовой палитры: <color-name>-palette.css.

В моем nuxt.config я называю цвет CSS следующим образом: 

  css: [
    '~/assets/style/app.styl',
    '~/assets/css/main.css',
    '~/assets/css/orange-palette.css'
  ],

Есть ли способ привязкифайл CSS в зависимости от пути URL / вызова API вместо того, чтобы указывать путь туда?

Я не уверен, что смогу использовать его и в шаблонах, привязывая туда файлы CSS.Возможно ли это?

Спасибо

Ответы [ 2 ]

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

Для динамической загрузки файлов 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>

Глядя на фрагмент кода выше, вы можете добавить файл css для динамического использования на своей странице через функцию head ().Вы можете изменить CSS для использования на лету прямо на любой странице в зависимости от взаимодействия с пользователем (например, моего взаимодействия с нажатием кнопки).

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

Вы можете использовать «голову» в компоненте страницы.https://codesandbox.io/s/xr55o4yqmq

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