Блог

Главная - Вопросы по программированию - Vue выбор темы во время сборки

Vue выбор темы во время сборки

#vue.js

Вопрос:

У меня есть приложение, которое развертывается с двумя темами — «нормальная» и доступность-которые реализуются с помощью правил

 #app.default {
    @import './assets/scss/app.scss';
    font-family: $font-family-base;
}

#app.accessibility {
    @import './assets/scss/app-accessibility.scss';
}

и атрибут стиля привязки #приложения. У меня есть необходимость развернуть одно и то же приложение в нескольких местах, но с другой «нормальной» темой. Каковы стратегии, позволяющие выбирать, какую тему использовать во время сборки, сохраняя при этом возможность переключаться на (всегда одну и ту же) тему специальных возможностей во время выполнения? Эта компиляция выполняется из сценария ant, поэтому я мог бы в принципе использовать, например, файлы app1.scss и app2.scss для разных развертываний, а затем, прежде чем вызывать сборку vue, скопировать выбранный файл в app.scss. Мне это не кажется чистым решением, хотя, есть ли лучшие варианты?

Комментарии:

1. Вы можете добавить атрибут HTML, содержащий домен, в котором фактически развернуто приложение, например <div id="app" :deploy="window.location.hostname"> , а затем добавить соответствующие селекторы CSS, например #app.default[deploy="app.test.example.com"]

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

3. Что ж, тогда вам лучше всего использовать переменные CSS (также называемые пользовательскими свойствами) — тогда вы можете развернуть другой файл CSS с соответствующими переменными CSS для каждого развертывания, в то время как исходный код останется прежним и будет создан только один раз.

Метки: