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

Question

我想将我的 css class 样式传递到 .vue 文件中的 html 标签中。我的 vue 加载器设置 webpack.config.js:

 {
            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 标签中，谢谢。

Answer 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)
});
}

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

Inline css from cdn by vue-style-loader

html

javascript

webpack

webpack-style-loader