无法在 webpack 4 中加载 css 文件

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()
    ]

};

我正在尝试从 /stylesheets/app.css 加载一个 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

内容没有关联的样式。

我是否遗漏了 webpack 配置中的任何内容？

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未使用；它仅用作插件。

无法在 webpack 4 中加载 css 文件

Cannot load css file in webpack 4

css

webpack

css-loader

webpack-4