代码之家 › 专栏 › 技术社区 › AirNoir

通过vue样式加载程序从cdn内联css

webpack-style-loader webpack html javascript

1

AirNoir · 技术社区 · 8 年前

我的vue加载程序设置在网页包中。配置。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风格的加载器是否能帮我做到这一点。谁能告诉我如何将我的样式(cdn或单个css文件)嵌入html标签,谢谢。

1 回复 | 直到 8 年前

1

0

AirNoir 8 年前

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