Webpack ExtractTextPlugin throws error when loading Sass - sass

Question

Trying to add sass-loader to my webpack config and running into an error:
70% 1/1 build modules/Users/a557789/Documents/f/Portal/node_modules/webpack/node_modules/webpack-core/lib/LoadersList.js:81
r.forEach(function(r) {
^
TypeError: undefined is not a function
at /Users/a557789/Documents/f/Portal/node_modules/webpack/node_modules/webpack-core/lib/LoadersList.js:81:5
at Array.reduce (native)
at LoadersList.match (/Users/a557789/Documents/f/Portal/node_modules/webpack/node_modules/webpack-core/lib/LoadersList.js:80:27)
webpack.config:
var webpack = require("webpack");
var baseDir = "dist";
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var path = require("path");
module.exports = {
context: __dirname + "/app",
entry: {
app: "./main"
},
resolve: {
extensions: ['', '.js', '.ts', '.css', '.scss']
},
output: {
path: __dirname + "/dist",
sourceMapFilename: "[name].map",
filename: "[name].js"
},
module: {
loaders: [
//https://www.npmjs.com/package/webpack-typescript
{
test: /\.ts$/,
loader: "ts-loader"
},
{
test: /\.scss$/,
loaders: ExtractTextPlugin.extract("style", "css!sass")
//loaders: ExtractTextPlugin.extract("style!css!sass")
}
],
noParse: [ /angular2\/bundles\/.+/ ]
},
plugins: [
new webpack.optimize.OccurenceOrderPlugin(true),
new ExtractTextPlugin("style.css"),
new HtmlWebpackPlugin({
template: "../index.html",
inject: "body"
})
],
devtool: "source-map"
};
I've tried a bunch of different options for the params to the extract() call but with no luck. Any help would be greatly appreciated.

Answer 1

Instead of using
loaders: ExtractTextPlugin.extract("style", "css!sass")
you should use
loader: ExtractTextPlugin.extract("style", "css!sass")
instead.
The error isn't particularly descriptive in this case.

Answer 2

In my case solution was instead ExtractTextPlugin use MiniCssExtractPlugin. More details in this video https://www.youtube.com/watch?v=JlBDfj75T3Y&list=PLblA84xge2_zwxh3XJqy6UVxS60YdusY8&index=10
So, my config looks like
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const path = require("path");
module.exports = {
entry: "./src/index.js",
output: {
filename: "[name].[contenthash].bundle.js",
path: path.resolve(__dirname, "dist"),
},
module: {
rules: [
//babel
{
test: /\.m?js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: "babel-loader",
options: {
presets: ["#babel/preset-env"],
},
},
},
//css
{
test: /\.less$/,
use: [MiniCssExtractPlugin.loader, "css-loader", "less-loader"],
},
],
},
plugins: [
new HtmlWebpackPlugin({
template: "index.html",
title: "My app",
}),
new MiniCssExtractPlugin(),
new CleanWebpackPlugin(),
],
};