VueJS + Webpack + динамический CSS

Question

как я могу динамически загружать файл CSS в приложении VueJS (SPA)?

Краткий сценарий

• Приложение запускается и отправляет запрос на внутренний сервер для имени файла CSS по URL-адресу
• Apllication получает ответ от внутреннего сервера с параметрами имени файла css

Тогда мне нужно вызвать что-то, что загружает новый файл CSS по данным ответа.

Мы использовали это для брендинга сайта (CSS зависит от реального домена - но сайт установлен на одном хостинге). Этот файл CSS может находиться на нашем сервере (/assets/css/xx.css) или на других серверах.

Короткий фрагмент из компонента Vue:

loadCssRequest(location.href).then(function(reponse){
    // something whats load css by response.css_code
});

Спасибо за любые идеи.

Answer 1

Вы можете ввести css в заголовок компонента

loadCssRequest(location.href).then(function(reponse){
   var style = document.createElement('style');
   style.type = 'text/css';
   style.innerHTML = reponse;
   document.getElementsByTagName('head')[0].appendChild(style);
});

Или, если у вас есть путь css на другом сервере (например, /assets/css/xx.css)

var link = document.createElement('link');
link.setAttribute('rel', 'stylesheet');
link.setAttribute('type', 'text/css');
link.setAttribute('href', '/assets/css/xx.css');
document.getElementsByTagName('head')[0].appendChild(link);