Search code examples
javascripthtmlwebpackwebpack-style-loader

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.

Solution

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