Webpack 4: SCSS to CSS into separate file : <p>I would like to use Webpack 4 to transpile on one side my ES6 Javascript separately from my Sass:</p>

<ul>
<li>src/js/index.js → static/js/index.js</li>
<li>src/css/style.scss → static/css/style.css</li>
</ul>

<p>Currently my webpack configuration seems to correctly transpile the javascript into a bundle.js but I cannot get my SCSS to transpile to CSS correctly. </p>

<p>I would definitely try to debug somehow but since I'm very ignorant on Webpack internals I'm not sure how to do it. </p>

<p>Following my webpack.config.js:</p>

<pre><code>const ExtractTextPlugin = require('extract-text-webpack-plugin');
const path = require('path');

module.exports = {

  mode: 'development',

  entry: {
    bundle: './src/js/index.js',
  },

  output: {
    filename: '[name].js',
    path: path.resolve('static/js')
  },

  module: {
    rules: [{
      test: /\.scss$/,
      use: ExtractTextPlugin.extract({
        fallback: 'style-loader',
        use: [
          { loader: "css-loader" },     
          { 
            loader: "sass-loader",
            options: {
              includePaths: [
                path.resolve("./src/css")
              ]
            }
          },
        ]
      }),
    }]
  },

  plugins: [
    new ExtractTextPlugin({
      filename: path.resolve('static/css/style.css')
    })
  ],
}
</code></pre>
