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("")

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>
           <link rel="stylesheet" href="localhost:3000/stylesheets/bootstrap-3.3.7/dist/css/bootstrap.css"></link>

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

  inlineCss(html, options)
  .then(function(html) {

client side:

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