CSS-Loader error

[HowardTangOvO]

I'm trying to speed up the build process, but I'm encountering a css-loader error.
react-image-gallery is a third-party component.
I've also modified the glupfile file; details are below.
Looking forward to your reply.

SCSS file

@import "~react-image-gallery/styles/scss/image-gallery.scss"; <--- **css-loader error :Can't find stylesheet to import.**
@import "src/common/styles/variables.scss";

glup file

'use strict';

const build = require('@microsoft/sp-build-web');
const path = require('path');


build.addSuppression(`Warning - [sass] The local CSS class 'ms-Grid' is not camelCase and will not be type-safe.`);


build.addSuppression(/Warning - \[sass\] src\/common\/styles\/.*\.scss: filename should end with module\.sass or module\.scss/);
build.addSuppression(/Warning/gi);

build.addSuppression(/Warning - \[tslint\]/);
build.addSuppression(/Warning - lint/);

const lintTask = build.tslintCmd;
if (lintTask) {
  lintTask.enabled = false;
}

const eslintTask = build.eslintCmd;
if (eslintTask) {
  eslintTask.enabled = false;
}

build.configureWebpack.mergeConfig({
  additionalConfiguration: (generatedConfiguration) => {
    const sassRule = generatedConfiguration.module.rules.find(rule =>
      rule.test && rule.test.toString().includes('scss')
    );

    if (sassRule && sassRule.use) {
      const sassLoaderIndex = sassRule.use.findIndex(loader =>
        loader.loader && loader.loader.includes('sass-loader')
      );

      if (sassLoaderIndex !== -1) {
        sassRule.use[sassLoaderIndex].options = {
          ...sassRule.use[sassLoaderIndex].options,
          sassOptions: {
            includePaths: [
              path.resolve(__dirname, 'src'),
              path.resolve(__dirname, 'src/common/styles'),
              path.resolve(__dirname, 'node_modules')
            ],
            api: 'modern'
          },
        };
      }
    }

    if (!generatedConfiguration.resolve) {
      generatedConfiguration.resolve = {};
    }
    if (!generatedConfiguration.resolve.alias) {
      generatedConfiguration.resolve.alias = {};
    }

    //root src folder
    generatedConfiguration.resolve.alias['@common'] = path.resolve(__dirname, './lib/common');
    generatedConfiguration.resolve.alias['@webparts'] = path.resolve(__dirname, './lib/webparts');

    return generatedConfiguration;
  }
});

var getTasks = build.rig.getTasks;
build.rig.getTasks = function () {
  var result = getTasks.call(build.rig);

  result.set('serve', result.get('serve-deprecated'));

  return result;
};

/* fast-serve */
const { addFastServe } = require("spfx-fast-serve-helpers");
addFastServe(build);
/* end of fast-serve */

build.initialize(require('gulp'));

package.json

  "dependencies": {
    "@fluentui/react": "^8.106.4",
    "@microsoft/generator-sharepoint": "^1.21.1",
    "@microsoft/sp-component-base": "1.21.1",
    "@microsoft/sp-core-library": "1.21.1",
    "@microsoft/sp-lodash-subset": "1.21.1",
    "@microsoft/sp-office-ui-fabric-core": "1.21.1",
    "@microsoft/sp-property-pane": "1.21.1",
    "@microsoft/sp-webpart-base": "1.21.1",
    "@pnp/core": "^4.16.0",
    "@pnp/sp": "^4.16.0",
    "dayjs": "^1.11.18",
    "react": "17.0.1",
    "react-copy-to-clipboard": "^5.1.0",
    "react-dom": "17.0.1",
    "react-image-gallery": "^1.4.0",
    "react-select": "^5.10.2",
    "throttle-debounce": "^5.0.2",
    "tslib": "2.3.1",
    "yo": "^5.1.0"
  },
  "devDependencies": {
    "@microsoft/eslint-config-spfx": "1.21.1",
    "@microsoft/eslint-plugin-spfx": "1.21.1",
    "@microsoft/rush-stack-compiler-5.3": "0.1.0",
    "@microsoft/sp-build-web": "1.21.1",
    "@microsoft/sp-module-interfaces": "1.21.1",
    "@rushstack/eslint-config": "4.0.1",
    "@types/react": "17.0.45",
    "@types/react-copy-to-clipboard": "^5.0.7",
    "@types/react-dom": "17.0.17",
    "@types/react-image-gallery": "^1.2.4",
    "@types/react-select": "^5.0.0",
    "@types/throttle-debounce": "^5.0.2",
    "@types/webpack-env": "~1.15.2",
    "ajv": "^6.12.5",
    "cross-env": "^7.0.3",
    "eslint": "8.57.1",
    "eslint-plugin-react-hooks": "4.3.0",
    "gulp": "4.0.2",
    "typescript": "~5.3.3",
    "spfx-fast-serve-helpers": "~1.21.0"
  },

Compile Error:

ERROR in ./src/common/styles/customImageGallery.scss (./node_modules/spfx-fast-serve-helpers/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[6].use[3]!./src/common/styles/customImageGallery.scss)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
Can't find stylesheet to import.
  ╷
1 │ @import "~react-image-gallery/styles/scss/image-gallery.scss";
  │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  src/common/styles/customImageGallery.scss 1:9  root stylesheet

webpack compiled in 15845 ms
No errors found.