С Vue, как бы я загружал разные CSS-файлы в зависимости от логики / данных? - PullRequest
Новая
       5

С Vue, как бы я загружал разные CSS-файлы в зависимости от логики / данных?

0 голосов
/ 14 ноября 2018

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

Я знаю, что могу отключить класс для тега <body>, но это сделает CSS далекоЭто сложнее, чем использование двух разных файлов .scss с разными значениями переменных.

Есть идеи?

Ответы [ 2 ]

0 голосов
/ 14 ноября 2018

Не могу придумать какой-либо Vue-Specific подход, но в простом Javascript 

const styleEl = document.createElement("style");
styleEl.innerHTML = "@import 'alternate.stylesheet.css'";
document.head.appendChild(this.styleEl);

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

0 голосов
/ 14 ноября 2018

Я не могу придумать элегантный способ сделать это.Если вы используете отдельные файловые компоненты (SFC), вы можете использовать CSS-модули .Из документации vue-loader ..

В одном компоненте *.vue может быть несколько тегов <style>.Чтобы внедренные стили не перезаписывали друг друга, вы можете настроить имя внедренного вычисляемого свойства, задав атрибуту модуля значение 

<style module="a">
  /* identifiers injected as a */
</style>

<style module="b">
  /* identifiers injected as b */
</style>

Таким образом, у вас может быть тег стиля для вашего общего стиля,и другие теги стиля для стиля темы.Затем вы можете решить, из какого модуля / стиля-тега будет выбран класс с помощью вычисляемого свойства, которое использует вашу логику для возврата имени модуля.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...