Webpack: how to fix Module parse failed: Unexpected token error?

Question

Sass

Hello! This is my first time trying to use sass. Setting up webpack:

const ExtractTextPlugin = require('extract-text-webpack-plugin');
const path=require('path');

module.exports={
  entry:'./src/index.js',
  output:{
    filename:'bundle.js',
    path:path.resolve(__dirname, 'dist')
  },
  module: {
  rules: [
    {
      test: /\.scss$/,
      use: ExtractTextPlugin.extract({
        fallback: 'style-loader',
        use: ['css-loader', 'sass-loader']
      })
    }
  ]
},
plugins: [
 new ExtractTextPlugin('style.css')
],
resolve: {
    extensions: ['.js', '.scss']
}
}

scss and js files are in the same folder (src).
scss included in input index.js:
import './src/base.scss'
When I run webpack I get an error:
ERROR in ./src/base.scss 1:9
Module parse failed: Unexpected token (1:9)
You may need an appropriate loader to handle this file type, currently no loader
s are configured to process this file. See https://webpack.js.org/concepts#loade
rs
> $bg-color: pink;
|
| body {
@ ./src/index.js 1:0-20

Answer 1

ExtractTextPlugin depricated use MiniCssExtractPlugin