Есть ли способ переключения глобально определенных переменных scss-файла в Nuxt.js с помощью Vuex и Middleware? - PullRequest
Новая
       27

Есть ли способ переключения глобально определенных переменных scss-файла в Nuxt.js с помощью Vuex и Middleware?

0 голосов
/ 25 апреля 2019

Я пытаюсь найти способ динамически изменить, какой файл _variables.scss загружается глобально на основе сохраненного состояния в моем хранилище Vuex в моем универсальном веб-приложении Nuxt.js. Есть ли какой-нибудь возможный способ сделать это вне файла nuxt.config.js?

Я не могу поделиться большей частью кода, относящегося к политике компании, но позвольте мне установить, где я нахожусь. У нас есть разные клиенты, пытающиеся получить доступ к версии нашего веб-приложения. Каждый тип регистрируется на своем домене, то есть «зеленые» клиенты входят через www.green.com/login, «красные» клиенты через www.red.com/login и т. Д. Тема макета, означающая цвета, шрифты и т. Д., Определяется загрузкой _variables.scss.

В настоящее время в моем приложении Nuxt.js есть промежуточное программное обеспечение theme.js, которое получает домен, разделяет хост (www.red.com становится просто red) и сохраняется в хранилище vuex как state.theme.

Теперь я не могу понять, как загружать red_variables.scss или green_variables.scss динамически в зависимости от состояния.

1 Ответ

0 голосов
/ 30 апреля 2019

Итак, после некоторых проб и ошибок было найдено решение, не элегантное, но оно работает. Создан файл промежуточного программного обеспечения с именем theme.js, который выглядит примерно так: 

  const domain = host.split(':')[0]
  switch (true) {
    case domain.includes('red.com'):
      return {
        theme: 'red'
      }
    case domain.includes('green.com'):
      return {
         theme: 'green'
      }
    /*** more cases for different themes ***/
    default:
      return 'main'
  }
}

function loadTheme(theme) {
  import('~assets/css/' + theme + '.scss')
}

export default function({ app, req, store, error }) {
  let theme = store.state.theme

  if (!theme && process.server) {
    if (req && req.headers && req.headers.host) {
      const themeSettings = mapHostToTheme(req.headers.host)

      theme = themeSettings.theme
      store.commit('setTheme', theme)
    }
  }

  if (!theme) {
    return error({
      statusCode: 500,
      message: 'Unable to determine host'
    })
  }

  loadTheme(theme)
}

По сути захватывает имя хоста, подтверждает домен, добавляет имя темы в хранилище, затем загружает соответствующий файл .scss на основе имени, сохраненного в состоянии Vuex.

...