AirNoir AirNoir - 28 days ago 17
HTML Question

Inline css from cdn by vue-style-loader

I want to pass my css class style into html tag in .vue file.
my vue loader setting in webpack.config.js:

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


however, I dont know how to configure the plugin:

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


and I even don't know if vue-style-loader could do this for me. Could anybody tell me how to embed my styles (cdn or single css file) into html tag , thanks.

Answer Source

I finally find a solution: I did not use webpack to compile the template. I try to pass the html content to server side (node.js , not necessary, you could do it in client side), and use inline-css to embed the style into related tags. Maybe it's not the best solution´╝î but it does resolve my problem. If anyone gets better anwser , please don't hesitate to tell me.

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

client side:

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