Настройка мульти темы - webpack / Vue-cli - PullRequest
Новая
       24

Настройка мульти темы - webpack / Vue-cli

0 голосов
/ 05 сентября 2018

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

Моя идея заключалась в том, чтобы использовать некоторые параметры запроса для встраивания, например, здесь: <iframe src="embeddedApplication?theme=client_1"/>, а затем прочитать параметр запроса и запросить соответствующий стиль поверх основы. Все хорошо, легко peasy лимон сжимать.

Чего я не ожидал, так это того, что конфигурация веб-пакетов будет такой болью в sass. Я привык к vue-cli и предпочел бы придерживаться этого (это, вероятно, означает цепочку веб-пакетов, но это не проблема), по крайней мере, хотел бы сохранить конфигурацию веб-пакетов и просто расширить ее.

В идеале я хотел бы создать client_1.scss и client_2.scss и так далее, содержащие только переменные scss. Затем я (в идеале) хотел бы как-то уговорить веб-пакет перебрать все файлы .vue (как обычно), но затем повторить цикл для каждого файла client_N.scss, разрешив импорт настроек из этого файла.

Визуально: 

src
|--themes
|  |-- client_1.scss
|  |-- client_2.scss
|
|--components
   |-- comp_A
   |-- comp_B

dist
|--client_1.css /* comp_A + comp_B with variables from client_1.scss
|--client_1.css /* comp_A + comp_B with variables from client_2.scss

Я много пробовал, но мне не удалось приблизиться к этому. Самое близкое, что у меня было, - это создание двух отдельных стилей (добавление *.scss точек входа). Но тогда я просто пишу глобальные стили.

У кого-нибудь есть идеи? Большое спасибо!

UPDATE

В настоящее время я загружаю несколько файлов JSON, содержащих переменные scss (звучит довольно забавно, я знаю, что это так @epegzz/sass-vars-loader), поэтому переменные scss разрешаются правильно в различных компонентах одного файла. 

chainWebpack: config => {
    const files = fs.readdirSync('./src/assets/themes/');

    files.forEach(file => {
        config.module.rule('scss').oneOf('vue')
            .use('sass-vars-loader')
            .loader('@epegzz/sass-vars-loader')
            .options({
                syntax: 'scss',
                files: [
                    path.resolve(__dirname, `src/assets/themes/${file}`)
                ]
            })
    });
}

Это все хорошо, но первоначальная проблема на самом деле не решена. Мой цикл forEach включает в себя все файлы, но все равно только один вывод CSS .

Если бы я только мог "повторить" весь процесс сборки снова ...?

...