title: Webpack 4. Compile scss to separate css file
body: <p>Im trying to compile scss into a separate css file with no luck. As it is now the css gets into the bundle.js together with all js code.
  How can i separate my css into its own file?</p>
  <p>This is how my config looks:</p>
  <pre class="lang-js prettyprint-override"><code>var path = require(&quot;path&quot;);
  
  module.exports = {
      entry: &quot;./js/main.js&quot;,
      output: {
          path: path.resolve(__dirname, &quot;dist&quot;),
          filename: &quot;bundle.js&quot;,
          publicPath: &quot;/dist&quot;
      },
      watch:true,
      module: {
          rules: [
              {
                  test: /\.js$/,
                  use: {
                      loader: &quot;babel-loader&quot;,
                      options: { presets: [&quot;es2015&quot;] }
                  }
              },
              {
                  test: /\.scss$/,
                  use: [
                      {
                          loader: &quot;style-loader&quot;
                      },
                      {
                          loader: &quot;css-loader&quot;
                      },
                      {
                          loader: &quot;sass-loader&quot;
                      }
                  ]
              }
          ]
      }
  };
  </code></pre>