Условная таблица стилей в Nuxt SSR в зависимости от значения хранилища

#css #vue.js #webpack #sass #nuxt.js

#css #vue.js #webpack #sass #nuxt.js

Вопрос:

Я просматривал документацию StackOverflow и Nuxt, но у меня не укладывается в голове этот вопрос.

Итак, мне нужно сделать RTL. Мой проект находится в Nuxt, и мы используем SCSS. Я устанавливаю для dir="rtl" htmlAttrs значение условно в зависимости от средства получения хранилища, которое сообщает мне, является ли язык RTL или нет. Требование для этой конкретной задачи состоит в том, что таблица стилей RTL должна быть импортирована условно со стороны сервера также, если страна является RTL, чтобы она переопределяла main.scss файл.

Теперь, в nuxtServerInit() , я не могу установить таблицу стилей в head, потому что маршрут не приведет меня к файлу, и, что наиболее важно, Webpack не будет его компилировать, поскольку он находится вне обычного потока приложения и не импортируется main.scss , на что указывает таблица стилей, на которую указывает конфигурация Nuxtи которая содержит все другие стили. Я понимаю, что я мог бы использовать класс и использовать его условно в компонентах, но это не является обязательным требованием. nuxt.config.js Файл в соответствующей части выглядит следующим образом:

  css: [
    '@/assets/styles/main.scss'
  ]
 

Там у меня, очевидно, нет доступа к магазину.

Я сказал, что попробовал это:

  if (isRTL) {
    service.addEntryToArray('link', {
      rel: 'stylesheet',
      type: 'text/css',
      href: '../assets/styles/main.rtl.scss'
    });
  }
 

(Мы используем сервис для добавления элементов в head)

Я понимаю, что это было наивно с моей стороны, потому что Webpack не имеет права голоса, поэтому нет переноса и нет фактического ресурса, что означает, что маршрут просто неправильный, и даже если бы он был правильным, браузер не смог бы его прочитать.

Есть идеи о том, как этого можно достичь на некомпонентном уровне? Это должно быть частью потока Webpack, должно быть добавлено на стороне сервера и должно быть импортировано — я не могу просто импортировать его регулярно и использовать только класс (опять же, я не упрямый, я работаю над проектом, и это требование клиента).

Если вам нужна дополнительная информация, я обновлю сообщение, но я не знаю, что еще предоставить.