unable to generate CSS file sass-loader webpack

Question

I am trying to use sass-loader to convert SCSS files to css(Required to have physical file). Styles are getting applied but unable to see generated .css files .

//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")
   ]
}

Full source code is available at github repo

Answer 1

I've seen the source code. I'm sure it's because of you're still using webpack version 1 syntax but what you installed was webpack v2. Webpack2 has a different syntax than the previous version.

Using webpack v2 your webpack.config.js will look like this:

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
    ]

Hope this helps.