webpack - SCSS 未在 webpack4 开发构建中加载

Question

我正在尝试将我的应用程序从 Webpack3 迁移到 Webpack4。我在 dev build.SCSS 文件中遇到问题，或者没有在 dev build 中合并并且它没有加载。请在我的 webpack 开发配置下面找到。我使用 mini-css-extract-plugin 而不是 extract-text-webpack-plugin。

const path = require('path');
const paths = require('./paths');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CopyWebpackPlugin = require('copy-webpack-plugin');
process.env.NODE_ENV = 'development';
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

const data = {
    devtool: 'source-map',
    context: paths.context,
    mode: 'development',
    entry: [
        'react-hot-loader/patch',
        'webpack-dev-server/client?http://0.0.0.0:3030',
        'webpack/hot/only-dev-server',
        paths.appIndexJs
    ],
    output: {
        path: '/',
        filename: 'static/js/[name].bundle.js',
        publicPath: '/',
        jsonpFunction: 'function'
    },
    optimization: {
        namedModules: true,
        splitChunks: {
            cacheGroups: {
                commons: { test: /[\\/]node_modules[\\/]/, name: "vendors", chunks: "all" }
            },
        },
        noEmitOnErrors: true,
        concatenateModules: true
    },
    module: {
        rules: [{
                test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)$/,
                use: [{
                    loader: 'file-loader',
                    options: {
                        name: 'static/images/[name].[ext]'
                    }
                }]
            },
            {
                test: /\.js$/,
                exclude: [/node_modules/],
                use: [{
                    loader: 'babel-loader',
                    options: {
                        presets: [
                            [
                                'latest',
                                {
                                    es2015: {
                                        modules: false
                                    }
                                }
                            ],
                            'react',
                            'react-hmre'
                        ],
                        plugins: [
                            'transform-class-properties', ['transform-object-rest-spread', { useBuiltIns: true }],
                            // Polyfills the runtime needed for async/await and generatorss
                            [
                                'transform-runtime',
                                {
                                    helpers: false,
                                    polyfill: false,
                                    regenerator: true,
                                    moduleName: path.dirname(require.resolve('babel-runtime/package'))
                                }
                            ],
                            [
                                'transform-regenerator',
                                {
                                    // Async functions are converted to generators by babel-preset-latest
                                    async: false
                                }
                            ]
                        ]
                    }
                }]
            },
            {
                test: /\.(sa|sc|c)ss$/,
                exclude: [/node_modules/],
                use: [
                    MiniCssExtractPlugin.loader,
                    {
                        loader: "css-loader",
                        options: {
                            modules: true,
                            localIdentName: '[name]__[local]',
                            importLoader: 1
                        }
                    },
                    {
                        loader: `postcss-loader`,
                        options: {
                            options: {},
                        }
                    },
                    { loader: "sass-loader" }
                ]
            },
            {
                test: /\.css$/,
                exclude: [/src/],
                include: [/node_modules/],
                use: [
                    MiniCssExtractPlugin.loader,
                    "css-loader"
                ]
            }
        ]
    },
    plugins: [
        new webpack.DefinePlugin({
            'process.env.NODE_ENV': '"development"',
            __IMAGE_PATH__: '""',
            __ENV__: '"development"'
        }),
        new webpack.LoaderOptionsPlugin({
            options: {
                postcss: [
                    require('postcss-import')({
                        path: process.cwd() + '/src/styles/',
                        addDependencyTo: webpack
                    }),
                    require('postcss-modules-resolve-from-alias')({
                        css: process.cwd() + '/src/styles'
                    }),
                    require('postcss-mixins'),
                    require('postcss-nested'),
                    require('postcss-cssnext')
                ]
            }
        }),
        new webpack.NamedModulesPlugin(),
        new webpack.HotModuleReplacementPlugin(),
        new MiniCssExtractPlugin({
            filename: 'static/css/main.css'
        }),
        new CopyWebpackPlugin([{ from: '../src/styles/images', to: 'static/images' }]),
        new CopyWebpackPlugin([{ from: '../public/images', to: 'static/images' }]),
        new webpack.ContextReplacementPlugin(/moment[\\\/]locale$/, /^\.\/(en)$/),
        new HtmlWebpackPlugin({
            inject: true,
            template: paths.appHtml,
            chunksSortMode: 'none',
            basePath: ''
        }),
        new BundleAnalyzerPlugin()
    ],
    resolve: {
        modules: [paths.context, paths.context + '/styles/', 'node_modules']
    },
    devServer: {
        contentBase: paths.context,
        port: 3040,
        hot: true,
        inli`enter code here`ne: false,
        historyApiFallback: true
    }
};
module.exports = data;

Css 文件被合并到 Dev 构建中。但是 SCSS 文件没有合并。它没有加载到页面中。请帮我解决这个问题。