vue-style-loaderのcdnからのインラインCSS。

私のCSSクラススタイルを.vueファイルのhtmlタグに渡したいと思います。 webpack.config.jsに設定私のVUEローダー：vue-style-loaderのcdnからのインラインCSS。

plugins: [ 
new ExtractTextPlugin("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css") 
]

とVUEスタイル-ローダーあれば私も知りません。

{ 
      test: /\.vue$/, 
      loader: 'vue-loader', 
      options: { 
       loaders: { 
        css: ExtractTextPlugin.extract({ 
         use: 'css-loader', 
         fallback: 'vue-style-loader' 
        }) 
        } 
      } 
},

しかし、私はプラグインを設定する方法を知らないが私のためにこれを行うことができます。誰も私のスタイル（cdnまたは単一のCSSファイル）をhtmlタグに埋め込む方法を教えていただけますか、ありがとう。

出典

2017-08-25 AirNoir

私は最終的に解決策を見つけました。テンプレートをコンパイルするためにwebpackを使用しませんでした。私はサーバー側（node.js、必要ではない、あなたはクライアント側でそれを行うことができます）にhtmlコンテンツを渡そうとし、inline-cssを使用して関連タグにスタイルを埋め込みます。多分それは最善の解決策ではありませんが、私の問題を解決します。誰かがより良いanwserを取得した場合は、私に教えてくださいことを躊躇しないでください。

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。

答えて

関連する問題