CSSファイルを生成できませんsass-loader webpack

Question

SCSSファイルをCSSに変換するためにsass-loaderを使用しようとしています（物理ファイルが必要です）。スタイルは適用されていますが、生成された.cssファイルは表示されません。

//webpack.config.js 

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

module.exports = { 
    entry: './src/index.js', 
    output: { 
     path: __dirname + '/public', 
     filename: 'bundle.js' 
    }, 
    devServer: { 
     contentBase: __dirname + '/public' 
    }, 
    module: { 
     loaders: [ 
      {test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader'}, 
      {test: /\.scss$/, loader: ExtractTextPlugin.extract('css-loader!sass-loader')} 
     ] 
    }, 
    plugins: [ 
     new ExtractTextPlugin("style.css") 
    ] 
} 

完全なソースコードは、私は、ソースコードを見てきましたgithub repo

Answer 1

でご利用いただけます。あなたがまだwebpack version 1の構文を使用しているからだと確信していますが、あなたがインストールしたものはwebpack v2でした。 Webpack2の構文は以前のバージョンとは異なります。あなたのwebpack.config.jsは次のようになりますwebpack v2を使用して

：

module: { 
     rules: [ // from 'loaders' to 'rules' 
      { 
       test: /\.js$/, 
       loader: 'babel-loader', 
       exclude: /node_modules/, 
      }, 
      { 
       test: /\.sass$/, 
       exclude: /node_modules/, 
       loader: ExtractTextPlugin.extract({ 
        fallbackLoader: 'style-loader', 
        loader: ['style-loader','sass-loader'] 
       }) 
      } 
     ] 
    }, 

    plugins: [ 
     new ExtractTextPlugin('bundle.css') // what the output file (css) is going to be 
    ] 

は、この情報がお役に立てば幸いです。