کامپایل نشدن فایل sass توسط webpack

من به webpack خودم یک فایل scss معرفی کردم .
داخل فایل scss خودم یک فایل scss دیگر رو با دستور @use فراخوانی کردم :

style.scss:::::::::

@use '@material/button/mdc-button';
@use '@material/button';

مشکلم اینه که وقتی که کامپایل تموم میشه فایل css تولید شده داخلش فقط متن زیر هست .

bundle.css::::::::

@use '@material/button/mdc-button';
@use '@material/button';

در صورتی که باید دیتای فایل @material/button/mdc-button رو بره بگیره بریزه داخل فایل bundle.css .

جالب ابنجاست وقتی از پکیج webpack-dev-server استفاده میکنم خیلی خوب فایل هامو ایمپورت میکنه اما اگه ازش استفاده نکنم و با کامند لاین خودم بخوام npm run build بزنم اینطوری میشه.

تنظیمات webpack.config.js

const autoprefixer = require('autoprefixer');
module.exports = [{
    entry: './template/sass/style.scss',
    output: {
        // This is necessary for webpack to compile
        // But we never use style-bundle.js
        filename: 'style-bundle.js',
    },
    module: {
        rules: [
            {
                test: /\.scss$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            name: 'bundle.css',
                        },
                    },
                    { loader: 'extract-loader' },
                    { loader: 'css-loader' },
                    {
                        loader: 'postcss-loader',
                        options: {
                            plugins: () => [autoprefixer()]
                        }
                    },

                    {
                        loader: 'sass-loader',
                        options: {
                            sassOptions: {
                                includePaths: ['./node_modules']
                            },
                            // Prefer Dart Sass
                            implementation: require('sass'),
                        }
                    }

                ]
            }
        ]
    },
}];