Unable to add SCSS rule to webpack

[Fleuv]

Steps to reproduce

1. Create a composer project with the plesk/ext-skeleton.
2. Add the following to the rules array in the module property of the webpack.config.babel.js file:

{
    test:  /\.scss$/i,
    use: [
        "style-loader",
        "css-loader",
        "sass-loader"
    ]
}

3. Create a SCSS file with some styling in the src/frontend directory.
4. Run yarn run build

Expected result
Compile successful.

Actual result
Failed to compile.

./styles.scss 1:0
Module parse failed: Unexpected character '#' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
...

[abashurov]

IIRC, the Webpack configuration provided by the plesk-ext-sdk does not support this way of extending it.

Try enabling it through the extension.config.js file like this instead (just POC):

module.exports = {
    webpack: (config, { isDev }) => {
        config.module.rules = [
            {
                test: /\.scss$/,
                use: ['style-loader', 'css-loader', 'sass-loader'],
            }, ...config.module.rules,
        ];
        return {
            ...config,
        };
    },
};