ModuleBuildError: Module build faile

[yoppyDev]

• Laravel Mix Version: 6.0.49
• Node Version: v18.12.0
• NPM Version: v8.19.2
• OS: macOS Ventura 13.3

Description:

Currently, in order to avoid polluting the global CSS, I am trying to set unique class names when compiling Scss to CSS. However, I am encountering an error during the process of compiling Scss to CSS.

webpack.mix.js

const mix = require('laravel-mix');


mix.webpackConfig({
    module: {
        rules: [
            {
                test: /\.scss$/,
                use: [
                    'style-loader',
                    {
                        loader: 'css-loader',
                        options: {
                            modules: true,
                            localIdentName: '[name]__[local]___[hash:base64:5]',
                        }
                    },
                    {
                        loader: "sass-loader",
                        options: {
                            // Prefer `dart-sass`
                            implementation: require("sass"),
                        },
                    },
                ]
            }
        ]
    },
    stats: {
        children: true,
    },
});


mix.sass( 'style.scss', 'style.css' );

Error message:

  ERROR in ./style.scss (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[4].use[3]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[4]!./node_modules/style-loader/dist/cjs.js!./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[10].use[1]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[10].use[2]!./style.scss)
  Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
  expected "{".
    ╷
  1 │ import api from "!./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js";
    │                                                                                        ^
    ╵
    style.scss 1:88  root stylesheet

  Child mini-css-extract-plugin /laravel-mix-error-demo/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1/laravel-mix-error-demo/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2/laravel-mix-error-demo/node_modules/resolve-url-loader/index.js??ruleSet[1].rules[4].use[3/laravel-mix-error-demo/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[4/laravel-mix-error-demo/node_modules/style-loader/dist/cjs.js/laravel-mix-error-demo/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[10].use[1/laravel-mix-error-demo/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[10].use[2/laravel-mix-error-demo/style.scss compiled with 1 error

ERROR in ./style.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
expected "{".
  ╷
1 │ import api from "!./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js";
  │                                                                                        ^
  ╵
  style.scss 1:88  root stylesheet
    at processResult /laravel-mix-error-demo/node_modules/webpack/lib/NormalModule.js:841:19)
    at /laravel-mix-error-demo/node_modules/webpack/lib/NormalModule.js:964:5
    at /laravel-mix-error-demo/node_modules/loader-runner/lib/LoaderRunner.js:400:11
    at /laravel-mix-error-demo/node_modules/loader-runner/lib/LoaderRunner.js:252:18
    at context.callback /laravel-mix-error-demo/node_modules/loader-runner/lib/LoaderRunner.js:124:13)
    at Object.loader /laravel-mix-error-demo/node_modules/sass-loader/dist/index.js:63:5)
    at runNextTicks (node:internal/process/task_queues:60:5)
    at process.processImmediate (node:internal/timers:442:9)

webpack compiled with 2 errors

Steps To Reproduce:

After cloning this repository, you can reproduce it by running npm install && npm run dev.
https://github.com/yoppyDev/laravel-mix-error-demo