Question

我想将我的css类样式传递给.vue文件中的html标记。我在webpack.config.js中的vue loader设置：

 {
            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-style-loader是否可以为我做这件事。谁能告诉我如何将我的样式（cdn或单个css文件）嵌入到html标签中，谢谢。

Answer 1

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

来自vn-style-loader的cdn的内联css

1 个答案: