Laravel Webpack Mix在Dashboard.js和Main.js上使用CodeSpliting时不编译SCSS

Question

我正在尝试编译SCSS，但在基于React的项目中使用代码拼接时Dashboard.css和Main.css为空。 这是我的 webpack.mix.js 文件，看起来像

const mix = require('laravel-mix');
const BundleAnalyzerPlugin = require("webpack-bundle-analyzer")
    .BundleAnalyzerPlugin;
require('laravel-mix-react-css-modules');
require('laravel-mix-purgecss');

mix.react('resources/js/Dashboard.js', 'public/js/Dashboard')
    .sass('resources/sass/Dashboard.scss', 'public/css/Dashboard', {
        sassOptions: {
            outputStyle: 'nested',
        },
        implementation: require('node-sass')
    })
    .react('resources/js/Main.js', 'public/js/Main')
    .sass('resources/sass/Main.scss', 'public/css/Main', {
        sassOptions: {
            outputStyle: 'nested',
        },
        implementation: require('node-sass') // Switch from Dart to node-sass implementation
    })


    // .purgeCss()
    .browserSync({
        proxy: "http://127.0.0.1:8000"
    })
    .webpackConfig({
        plugins: [
            new BundleAnalyzerPlugin({
                analyzerPort: 8080
            })

        ],
        output: {
            publicPath: "/",
            chunkFilename: "js/[name].js"
        },
        devtool: 'source-map'
    });

我正在运行 npm run watch cmd，它不能编译scss并显示类似的内容

或者建议我以其他方式分别将dashboard.js和mian.js与其相应的scs组合在一起。 预先感谢。