Good day fellow!

There is a file ../src/sass/style.scss, inside which I use imports to files located in subfolders.
Looks style.scss contents of a file like this, but as long as ….

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

When you try to build, Webpack gives me that’s a heap of errors:

Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleError: Module Error (from ./node_modules/sass-loader/dist/cjs.js):
Can not 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.

different modules on request sass set – problem solving is not found …. I suspect that a few problems: 1) vebpaku of something lacking under the name of sass
2) If the first pofiksit he still does not see the files that are referenced style.scss and which are from him in subfolders

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) = & gt; [
  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)?)( \?[aa-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) = & gt; ({
  Entry: Entry,
  Output: Output,
  / **
   * A FULL SOURCEMAP IS EMITED 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 OptimizecssassetSpludgin ({
        CSSPROCESSOR: CSSNANO.
      })
      NEW TERSERPLUGIN ({
        test: / \.js( \? .*)? $ 4,
        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"
 }
}

Hospada, Pamagiti …. Soon reactor Shendaranet

Answer 1

npm install sass-loader sass webpack --save-dev

A bit of shifted process space