title: Webpack error: You may need an appropriate loader to handle this file type. | @charset "UTF-8";
body: <p>I am trying to process a <code>.scss</code> file with Webpack 2.2.0 but instead of getting it injected into a <code>style</code> tag into my <code>index.html</code> file, I wanted to extract it into a <code>.css</code> file with ExtractTextPlugin.</p>
  
  <p>The following is my <code>webpack.config.js</code> file:</p>
  
  <pre><code>// webpack.config.js
  
  let path = require('path');
  let ExtractTextPlugin = require('extract-text-webpack-plugin');
  let extractCSS = new ExtractTextPlugin('[name].css');
  
  module.exports = {
      context: path.resolve(__dirname, './src'),
      entry: './index.js',
      output: {
          path: path.resolve(__dirname, 'dist'),
          filename: 'bundle.js',
          publicPath: 'dist/'
      },
      module: {
          rules: [
              {
                  test: /\.js$/,
                  use: 'babel-loader',
              },
              {
                  test: /\.(sass|scss)$/,
                  use: [
  
                      ///////////////////////////////////////
                      // THIS WONT WORK AND CAUSES THE ERROR
                      ///////////////////////////////////////
  
                      extractCSS.extract({
                          fallbackLoader: 'style-loader',
                          loader: ['css-loader', 'sass-loader']
                      }),
  
                      /////////////
                      // THIS WORKS
                      /////////////
  
                      // 'style-loader', 'css-loader', 'sass-loader'
                  ]
              },
              {
                  test: /\.(eot|svg|ttf|woff|woff2)$/,
                  loader: 'file-loader?name=[path][name].[ext]'
              }
          ]
      },
      plugins: [
          extractCSS
      ]
  }
  </code></pre>
  
  <p>Any help is appreciated. Thanks.</p>