VueJS + Webpack + 动态 CSS答案

【问题标题】：VueJS + Webpack + dynamic CSSVueJS + Webpack + 动态 CSS
【发布时间】：2018-05-16 11:04:19
【问题描述】：

如何在 VueJS (SPA) 应用程序上动态加载 CSS 文件？

短场景

应用程序启动并通过 url 地址向后端服务器提交 CSS 文件名的请求
应用程序使用 css 文件名参数从后端服务器获取响应

然后我需要通过响应数据调用什么加载新的 CSS 文件。

我们将其用于网站品牌（CSS 取决于实际域 - 但网站安装在一个主机上）。这个 CSS 文件可以位于我们的服务器 (/assets/css/xx.css) 或其他服务器上。

来自 Vue 组件的短 sn-p：

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

感谢您的任何想法。

【问题讨论】：

标签： css webpack vue.js

【解决方案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);

【讨论】：