webpackを使用して.scssファイル用に別のCSSファイルを追加するにはどうすればよいですか？

Question

私はWebpackを使用してコンパイルしている非常にシンプルなJavaScriptアプリを持っています。私は今アプリケーションを2つの別々のバンドルに分割しています - AppとVendorです。 には私のカスタムコードが含まれ、vendorファイルにはフレームワークが含まれています。

appバンドルには、appディレクトリにあるすべてのJavaScriptが含まれていますが、そこにもいくつかのSassファイルがあります。私はそれらを別々のCSSバンドルファイルにコンパイルするようにしています。

いくつかの調査を通じて、私はextract-text-webpack-pluginをWebpack Sassコンパイラとスタイルローダーで使用する必要があることを理解しました。

var webpack = require('webpack') 
var ExtractTextPlugin = require("extract-text-webpack-plugin") 

module.exports = { 
    context: __dirname + '/app', 
    entry: { 
     app: './app.module.js', 
     vendor: ['angular','angular-route'] 
    }, 
    output: { 
     path: __dirname + '/bundle', 
     filename: 'app.bundle.js' 
    }, 
    module: { 
     loaders: [ 
      { test: /\.scss$/, loader: ExtractTextPlugin.extract("style- loader", "css-loader") } 
     ] 
    }, 
    plugins: [ 
     new webpack.optimize.CommonsChunkPlugin(/* chunkName= */'vendor', /* filename= */'vendor.bundle.js'), 
     new ExtractTextPlugin("styles.css") 
    ] 
} 

私は次の依存関係は、NPMを使用してインストールされている：ここで

は私webpack.configファイルです

：

"css-loader": "^0.23.1", 
"extract-text-webpack-plugin": "^1.0.1", 
"node-sass": "^3.8.0", 
"sass-loader": "^4.0.0", 
"style-loader": "^0.13.1", 
"webpack": "^1.13.1" 

問題は、私はWebPACKのを使用してバンドルするとき、私は次のエラーを取得することです

Module not found: Error: Cannot resolve 'file' or 'directory' ./../node_modules/css-loader/index.js 

および

Module not found: Error: Cannot resolve 'file' or 'directory' ./../node_modules/style-loader/addStyles.js 

現時点では、メインアプリケーションファイルには1つのSassファイルしか含まれていません。私のメインのapp.jsファイルに、私は持っています：require('./styles.scss')これはなぜ起こっているのですか？同じ問題を持つことができ、あなたがWindowsを実行していることをあなたのものと

Answer 1

、次のソリューションは、私の仕事：

当社webpack.configの上部には、次の行を追加します。

var path = require('path'); 

を

次に、コンテキストを定義する場所を変更します。

context: path.resolve(__dirname, "folder_name")