Webpack 5 проблема импорта scss

Доброго времени суток коллеги!

Имеется файл ../src/sass/style.scss, внутри которого, я использую импорты на файлы находящиеся в дочерних папках. Выглядит содержание файла style.scss примерно так, но длиннее....

    @import "libs/bootsrap";
    @import "libs/swiper";
    @import "libs/maginfic-popup";
    @import "libs/font-awesome";
    @import "libs/custom-icons";

При попытке сборки, Webpack выдаёт мне вот такой ворох ошибок:

Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleError: Module Error (from ./node_modules/sass-loader/dist/cjs.js):
Cannot find module 'sass'
Require stack:
- ..\assets\node_modules\sass-loader\dist\utils.js
- ..\assets\node_modules\sass-loader\dist\index.js
- ..\assets\node_modules\sass-loader\dist\cjs.js
- ..\assets\node_modules\webpack\lib\ProgressPlugin.js
- ..\assets\node_modules\webpack\lib\index.js
- ..\assets\node_modules\webpack-cli\lib\webpack-cli.js
- ..\assets\node_modules\webpack-cli\lib\bootstrap.js
- ..\assets\node_modules\webpack-cli\bin\cli.js
- ..\assets\node_modules\webpack\bin\webpack.js
    at Object.emitError (..\assets\node_modules\webpack\lib\NormalModule.js:447:6)
    at getSassImplementation (..\assets\node_modules\sass-loader\dist\utils.js:59:21)
    at Object.loader (..\assets\node_modules\sass-loader\dist\index.js:35:59)

2 ERRORS in child compilations
webpack 5.17.0 compiled with 3 errors in 2802 ms
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

различные модули по запросу sass ставил - проблема решения не нашла....подозреваю что проблем несколько: 1) вебпаку чего то нехватает под именем sass 2)Eсли пофиксить первую он всё равно не видит файлы, на которые ссылается style.scss и которые находятся от него в дочерних папках

Webpack.config.js

/**
 * Webpack configuration.
 */

const path = require( 'path' );
const MiniCssExtractPlugin = require( 'mini-css-extract-plugin' );
const OptimizeCssAssetsPlugin = require( 'optimize-css-assets-webpack-plugin' );
const cssnano = require( 'cssnano' ); // https://cssnano.co/
const { CleanWebpackPlugin } = require( 'clean-webpack-plugin' );
const TerserPlugin = require( 'terser-webpack-plugin' );
const CopyPlugin = require('copy-webpack-plugin'); // https://webpack.js.org/plugins/copy-webpack-plugin/
const DependencyExtractionWebpackPlugin = require( '@wordpress/dependency-extraction-webpack-plugin' );

// JS Directory path.
const JS_DIR = path.resolve( __dirname, 'src/js' );
const IMG_DIR = path.resolve( __dirname, 'dist/images' );
const LIB_DIR = path.resolve( __dirname, 'src/libs' );
const STYLE_DIR = path.resolve( __dirname, 'src/sass' );
const BUILD_DIR = path.resolve( __dirname, 'build' );

const entry = {
    main: JS_DIR + '/main.js',
    styles: STYLE_DIR + '/style.scss',
};

const output = {
    path: BUILD_DIR,
    filename: 'js/[name].js'
};

/**
 * Note: argv.mode will return 'development' or 'production'.
 */
const plugins = ( argv ) => [
    new CleanWebpackPlugin( {
        cleanStaleWebpackAssets: ( 'production' === argv.mode  ) // Automatically remove all unused webpack assets on rebuild, when set to true in production. ( https://www.npmjs.com/package/clean-webpack-plugin#options-and-defaults-optional )
    } ),

    new MiniCssExtractPlugin( {
        filename: 'css/[name].css'
    } ),

    new CopyPlugin( {
        patterns: [
            { from: LIB_DIR, to: BUILD_DIR + '/library' }
        ]
    } ),

    new DependencyExtractionWebpackPlugin( {
        injectPolyfill: true,
        combineAssets: true,
    } )
];

const rules = [
    {
        test: /\.js$/,
        include: [ JS_DIR ],
        exclude: /node_modules/,
        use: 'babel-loader'
    },
    {
        test: /\.scss$/,
        exclude: /node_modules/,
        use: [
            MiniCssExtractPlugin.loader,
            'css-loader',
            'sass-loader',
        ]
    },
    {
        test: /\.(png|jpg|svg|jpeg|gif|ico)$/,
        use: {
            loader: 'file-loader',
            options: {
                name: '[path][name].[ext]',
                publicPath: 'production' === process.env.NODE_ENV ? '../' : '../../'
            }
        }
    },
    {
        test: /\.(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
        exclude: [ IMG_DIR, /node_modules/ ],
        use: {
            loader: 'file-loader',
            options: {
                name: '[path][name].[ext]',
                publicPath: 'production' === process.env.NODE_ENV ? '../' : '../../'
            }
        }
    }
];

/**
 * Since you may have to disambiguate in your webpack.config.js between development and production builds,
 * you can export a function from your webpack configuration instead of exporting an object
 *
 * @param {string} env environment ( See the environment options CLI documentation for syntax examples. https://webpack.js.org/api/cli/#environment-options )
 * @param argv options map ( This describes the options passed to webpack, with keys such as output-filename and optimize-minimize )
 * @return {{output: *, devtool: string, entry: *, optimization: {minimizer: [*, *]}, plugins: *, module: {rules: *}, externals: {jquery: string}}}
 *
 * @see https://webpack.js.org/configuration/configuration-types/#exporting-a-function
 */
module.exports = ( env, argv ) => ({

    entry: entry,

    output: output,

    /**
     * A full SourceMap is emitted as a separate file ( e.g.  main.js.map )
     * It adds a reference comment to the bundle so development tools know where to find it.
     * set this to false if you don't need it
     */
    devtool: 'source-map',

    module: {
        rules: rules,
    },

    optimization: {
        minimize: true,
        minimizer: [
            new OptimizeCssAssetsPlugin( {
                cssProcessor: cssnano
            } ),
            new TerserPlugin({
                test: /\.js(\?.*)?$/i,
                parallel: true,
            }),
        ]
    },

    plugins: plugins( argv ),

    externals: {
        jquery: 'jQuery'
    }
});

Package.json

{
  "devDependencies": {
    "@babel/core": "^7.12.10",
    "@babel/preset-env": "^7.12.11",
    "@babel/preset-react": "^7.12.10",
    "@wordpress/dependency-extraction-webpack-plugin": "^3.0.0",
    "babel-loader": "^8.2.2",
    "clean-webpack-plugin": "^3.0.0",
    "cross-env": "^7.0.3",
    "css-loader": "^5.0.1",
    "cssnano": "^4.1.10",
    "file-loader": "^6.2.0",
    "mini-css-extract-plugin": "^1.3.4",
    "optimize-css-assets-webpack-plugin": "^5.0.4",
    "sass-loader": "^10.1.1",
    "style-loader": "^2.0.0",
    "terser-webpack-plugin": "^5.1.1",
    "webpack": "^5.17.0",
    "webpack-cli": "^4.4.0"
  },
  "scripts": {
    "prod": "cross-env NODE_ENV=production webpack --mode production --progress",
    "dev": "cross-env NODE_ENV=development webpack --watch --mode development --progress",
    "clean": "rm -rf build/*"
  },
  "name": "default",
  "version": "2.0",
  "main": "index.js",
  "author": "Heitz",
  "license": "GPL v2",
  "private": true,
  "dependencies": {
    "copy-webpack-plugin": "^7.0.0"
  }
}

Хоспаде, памагити.... скоро реактор шендарахнет