Webpack-encore: Support for sass-loader 8.0.0

[Atlanta]

OS : WSL Ubuntu 18.04
webpack-encore : 0.28.0

Since I upgraded my package.json, sass-loader was updated to 8.0.0, and I get the following warning running yarn encore dev :

Running webpack ...

  WARNING   Webpack Encore requires version ^7.0.1 of sass-loader. Your version 8.0.0 is too new. The related feature *may* still work properly. If you have issues, try downgrading the library, or upgrading Encore.

My webpack.config.js :

var Encore = require('@symfony/webpack-encore');

Encore
    .setOutputPath('public/build/')
    .setPublicPath('/build')

    // some javascript entries
    // ...

    .enableSingleRuntimeChunk()
    .enableSourceMaps(!Encore.isProduction())
    .enableVersioning(Encore.isProduction())

    .enableSassLoader((options) => {
        options.sourceMap = true;
        options.sassOptions = {
            outputStyle: 'compressed',
            sourceComments: !Encore.isProduction(),
        };
    }, {})

    .autoProvidejQuery()
    .configureBabel(function (babelConfig) {
        babelConfig.plugins.push('@babel/plugin-proposal-class-properties');
    })
    .enableReactPreset()
    .copyFiles({
        from: './assets/images',
        to: 'images/[path][name].[ext]',
    })
    .copyFiles({
        from: './assets/svg',
        to: 'svg/[path][name].[ext]',
    })
;

module.exports = Encore.getWebpackConfig();

Could be integrated to PR #645

[stof]

this does not belong to #645, as sass-loader 8 is still for webpack 4, not for webpack 5.

[wrufeger]

sass-loader 8 uses sassOptions object as you provided already in webpack config. To use it with webpack-encore 0.28.0 you may use the following dirty hack in webpack-encore/lib/loaders/sass.js.
Replace
const config = Object.assign({}, { // needed by the resolve-url-loader sourceMap: (true === webpackConfig.sassOptions.resolveUrlLoader) || webpackConfig.useSourceMaps, // CSS minification is handled with mini-css-extract-plugin outputStyle: 'expanded' });
with
const config = {sassOptions: Object.assign({}, { // needed by the resolve-url-loader sourceMap: (true === webpackConfig.sassOptions.resolveUrlLoader) || webpackConfig.useSourceMaps, // CSS minification is handled with mini-css-extract-plugin outputStyle: 'expanded' })};

[hacfi]

My current workaround for this is editing webpack.config.js:

    .enableSassLoader((options) => {
        options.sourceMap = true;
        options.sassOptions = {
            outputStyle: options.outputStyle,
            sourceComments: !Encore.isProduction(),
        };
        delete options.outputStyle;
    }, {})

[b1rdex]

Fixed in #758