Vue.js + Webpack複数スタイルの出力

Question

私はいくつかのvue.jsコンポーネントをシングルページコンポーネント形式で書いています。

各.vueファイルについて、そのページに固有の記述が少なくなっています。

バンドルした後、グローバルスタイルスペースに入力するいくつかのスタイルタグがあります。したがって、私のクラスのいくつかは、異なるページに重なっています。

これはvue.jsとのWebPACKと意図した機能ですか？

Answer 1

これはvue-loader（vue-webpackテンプレートのメインプラグイン）のデフォルトの動作です。抽出に関するvue-loaderのドキュメントをチェックアウト

npm install extract-text-webpack-plugin --save-dev 

---

// webpack.config.js 
var ExtractTextPlugin = require("extract-text-webpack-plugin") 

module.exports = { 
    // other options... 
    module: { 
    loaders: [ 
     { 
     test: /\.vue$/, 
     loader: 'vue' 
     }, 
    ] 
    }, 
    vue: { 
    loaders: { 
     css: ExtractTextPlugin.extract("css"), 
     // you can also include <style lang="less"> or other langauges 
     less: ExtractTextPlugin.extract("css!less") 
    } 
    }, 
    plugins: [ 
    new ExtractTextPlugin("style.css") 
    ] 
} 

：

しかし、あなたがしたい場合は、1つのファイルにすべてのCSSを抽出することができます。