由vue-style-loader从cdn进行内联css

我想将我的css类风格传递到.vue文件中的html标签。在webpack.config.js我VUE装载机设置：由vue-style-loader从cdn进行内联css

{ 
      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式装载机可以为我做这个。任何人都可以告诉我如何将我的样式（cdn或单个css文件）嵌入到html标记中，谢谢。

来源

2017-08-25 AirNoir

我终于找到了一个解决方案：我没有使用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) 
}); 
}

来源

2017-08-28 09:12:11 AirNoir

由vue-style-loader从cdn进行内联css

回答

相关问题