How to replace less in webpack.config/package.json with sass?

Question

webpack

Good time of the day. I have a ready assembly, I need to do the project urgently, there is no way to understand webpack right now. Please help me replace the less preprocessor with sass(scss). Thanks a lot. webpack.config.js and
package.json are available on codepen.
webpack.config.js:
https://codepen.io/PolyakhAlex/pen/LjWQqe?editors=1010
package.json:
https://codepen.io/PolyakhAlex/pen/LjWQqe?editors=1010

Answer 1

In package.json replace:

less -> node-sass
less-loader -> sass-loader

In webpack.config.js replace:

{
    test: /\.less$/,
    loader: 'style' +
    '!css?sourceMap' +
    '!autoprefixer-loader?browsers=last 2 version' +
    '!less?sourceMap=source-map-less-inline'
}

on the

{
    test: /\.scss$/,
    loader: 'style-loader' +
    '!css-loader?sourceMap' +
    '!autoprefixer-loader?browsers=last 2 version' +
    '!sass-loader?sourceMap'
}

However, there is one thing: the 1st version of webpack is used, so you need to install the appropriate version of sass-loader (probably 4.1.1). Because of this, it will also be possible to swear at prefixes (css -> css-loader).