Не удается загрузить файл CSS в веб-пакете 4

Question

Учитывая следующую конфигурацию webpack 4:

const path = require('path')
const webpack = require('webpack')
const MiniCssExtractPlugin = require("mini-css-extract-plugin")
const devMode = process.env.NODE_ENV !== 'production'
const devFlagPlugin = new webpack.DefinePlugin({
  __DEV__: JSON.stringify(JSON.parse(process.env.DEBUG || 'false'))
})

module.exports = {
    mode: "development",
    entry: [
        'webpack-dev-server/client?http://0.0.0.0:3000',
        'webpack/hot/only-dev-server',
        "./app/app.js"
    ],
    output: {
        path: path.join(__dirname, "build"),
        filename: "bundle.js"
    },
    devtool: 'eval-source-map',
    resolve: {
        extensions: ['.js', '.jsx']
    },
    module: {
        rules: [
            { 
                test: /\.jsx|\.js?$/, 
                loader: 'babel-loader',
                options: {
                    plugins: [
                        'react-hot-loader/babel'
                    ]
                },
                exclude: /node_modules/},
            {
                test: /\.jsx|\.js$/,
                exclude: /node_modules/,
                use: [
                'babel-loader?' + JSON.stringify({presets: ['env', 'react']}),
                {
                    loader: 'eslint-loader'
                }]
            },
            {
                test: /\.css$/,
                include: /stylesheets|node_modules/,
                use: [ MiniCssExtractPlugin.loader, 'css-loader' ]
            },
            {
                test: /\.scss$/,
                include: /stylesheets/,
                use: [ MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader' ]
            },
            {
                test: /\.(jpg|png|gif|eot|woff|ttf|svg)/,
                loader: "file"
            }
        ]
    },
    devServer: {
        contentBase: "./build",
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: "[name].css",
            chunkFilename: "[id].css"
        }),
        devFlagPlugin,
        new webpack.NoEmitOnErrorsPlugin()
    ]

};

Я пытаюсь загрузить файл css из /stylesheets/app.css в app.js:

require('./stylesheets/app.css')
let routes = (
    <div className="app">
        <Router>
            <div>hello</div>
        </Router>
    </div>
)

render(routes, document.getElementById('root'))

Файл app.css определяется как:

html {
    font-family: "Open Sans",Arial,sans-serif;
    font-size: 20px;
    height: 100%;
}

Но когда я запускаю программу с:

webpack-dev-server --host 0.0.0.0 --port 3000 --hot --progress --colors

Контент не имеет стиля, связанного с ним.

Я что-то упустил в конфигурации веб-пакета?

Answer 1

В случае, если кто-то еще попадет в ту же проблему, вот правильный конфиг для загрузчиков css / scss:

{
    test: /\.css$/,
    include: /stylesheets|node_modules/,
    use: ["style-loader", "css-loader"]
},
{
    test: /\.scss$/,
    include: /stylesheets/,
    use: [ 'style-loader', 'css-loader', 'sass-loader' ]
}

MiniCssExtractPlugin.loader не используется; он используется только как плагин.