vue-loaderとwebpack2を使用してスタイラスライブラリとグローバルシートをロード

Question

私はbourgeon templateからQuasar frameworkへのプロジェクトを移行しようとしています。プロセスで

、私は2にWebPACKの1から更新する必要がありますすべてが、次を除いてokです：

私はいくつかのlibrairies（破裂しJEET）と私は、いくつかの変数を格納するスタイルシートでスタイラスを使用していますどのようなvueファイルでもグローバルに利用できるようにしてください。私はスタイラスシートがそれを必要とするすべてのvueファイルに手動でインポートされる別のトピックを見ました。しかし、これについては、ブルジョン・テンプレートのように自動的にグローバルに利用できることを好むでしょう。次のコードで

---

注 、IはクエーサーためのWebPACK 2で...

によってnon-necessary codeを除去し、ファイルは以下の通りです。

---

CSS-utils.js

Link

基本的には、次の形式でVUE-ローダーまたは定期的なスタイルローダーのconfig環境も出力ローダーは、（私はへの参照を除去したことに注意してください

{ 
    css: 'vue-style-loader!css-loader', 
    styl: 'vue-style-loader!css-loader!stylus-loader, 
    stylus: 'vue-style-loader!css-loader!stylus-loader 
} 

---

：）それはここでは関係ないとしてSASS

webpack.base.conf.js

Link

関心のコード部分は次のとおりです。

module: { 
    rules: [ 
    ... 
    { 
     test: /\.vue$/, 
     loader: 'vue-loader', 
     options: { 
     postcss: cssUtils.postcss, 
     loaders: merge({js: 'babel-loader'}, cssUtils.styleLoaders({ 
      sourceMap: useCssSourceMap, 
      extract: env.prod 
     })) 
     } 
    } 
    ... 
    ] 
} 

---

私は

をV2にポートしたいのWebPACK v1のコンフィグ

module.exports = { 
    ... 
    stylus: { 
    use: [ 
     require('jeet')(), 
     require('rupture')(), 
    ], 
    import: [ 
     path.resolve(__dirname, '../src/styles/index.styl') 
    ] 
    } 
} 

私は、CSS-utils.jsまたはwebpack.config.baseに（WebPACKの1文法からの）コードの一部を追加する方法を見つけることができないんだけど

---

のWebPACK v2の

と私の問題.jsファイルは、両方のVUEファイルに利用できるようにするとSTYL /スタイラスはJEETファイルや破裂はとindex.stylシートをlibrairies。

私はvue-loaderとstylus-loaderの両方のドキュメントを調べましたが、動作させることはできません。

webpack.config.base.jsに次のコードを追加しても機能しません。私は何をすべきかを知りません。ノードは、Jeet/Ruptureがインポートされていないこと、またはindex.stylがindex.stylに定義されているいくつかの変数の再設定に失敗していること、または+above('tablet')のような構文がRuptureからインポートされていないことを明示するメッセージエラーを出力します。

module.exports = { 
    ... 
    rules: [ 
    ...  
    ], 
    plugins: [ 
    ... 
    new webpack.LoaderOptionsPlugin({ 
    minimize: env.prod, 
    options: { 
     context: path.resolve(__dirname, '../src'), 
     ... 
     stylus: { 
     default: { 
     use: [ 
      require('jeet')(), 
      require('rupture')() 
     ], 
     import: [ 
      path.resolve(__dirname, '../src/styles/index.styl') 
     ] 
     } 
     } 
    } 
    }) 
    ] 
} 

---

@Razvan Stoenescuで指摘したようにすべてのヘルプは大幅に、

Answer 1

:)おかげで理解されるであろう、次のコードpeiceは私の問題を解決しました。どうもありがとう。

module.exports = { 
    ... 
    rules: [ 
    ...  
    ], 
    plugins: [ 
    ... 
    new webpack.LoaderOptionsPlugin({ 
    minimize: env.prod, 
    options: { 
    context: path.resolve(__dirname, '../src'), 
    ... 
    stylus: { 
     use: [ 
     require('jeet')(), 
     require('rupture')() 
     ], 
     import: [ 
     path.resolve(__dirname, '../src/styles/index.styl') 
     ] 
     } 
    } 
    }) 
] 
}