通过 vue-style-loader 从 cdn 内联 css答案

【问题标题】：Inline css from cdn by vue-style-loader通过 vue-style-loader 从 cdn 内联 css
【发布时间】：2018-02-03 08:41:17
【问题描述】：

我想将我的 css 类样式传递到 .vue 文件中的 html 标记中。我在 webpack.config.js 中的 vue 加载器设置：

 {
            test: /\.vue$/,
            loader: 'vue-loader',
            options: {
                loaders: {
                    css: ExtractTextPlugin.extract({
                      use: 'css-loader',
                      fallback: 'vue-style-loader' 
                    })
                  }
            }
 },

但是，我不知道如何配置插件：

plugins: [
 new ExtractTextPlugin("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css")
]

我什至不知道 vue-style-loader 是否可以为我做到这一点。谁能告诉我如何将我的样式（cdn 或单个 css 文件）嵌入到 html 标签中，谢谢。

【问题讨论】：

标签： javascript html webpack webpack-style-loader

【解决方案1】：

我终于找到了解决办法：我没有使用webpack编译模板。我尝试将 html 内容传递到服务器端（node.js，不是必需的，您可以在客户端进行），并使用 inline-css 将样式嵌入到相关标签中。也许这不是最好的解决方案，但它确实解决了我的问题。如果有人得到更好的答案，请不要犹豫告诉我。

exports.convertHtmlToDocx = function(req,res){
  const HtmlDocx = require('html-docx-js');
  const fs = require("fs");
  const body = req.body;    
  let html = req.body.html;
  html = `<!DOCTYPE html>
       <html>
       <head>
           <style>
               p{color:red;}
           </style>
           <link rel="stylesheet" href="localhost:3000/stylesheets/bootstrap-3.3.7/dist/css/bootstrap.css"></link>
       </head> 
       <body>${html}</body>
       </html>`;

  const options = {
    url: 'localhost:3000'
  }
  const inlineCss = require('inline-css');

  inlineCss(html, options)
  .then(function(html) {
    console.log(html)      
  });   
}

客户端：

const apiUrl = '';
import axios from 'axios'
api.exportDocx = function(param, callback){   
    //param: { html: '<div><p>xxxxx</p></div>'} ....
axios.post(`${apiUrl}/convertHtmlToDocx`,param).then(result => {
    callback(result)
});
}

【讨论】：