如何在React应用程序中使用Webpack加载CSS样式

Question

我的React应用程序出现问题。我已经添加了Webpack，它正在成功编译，但在提供内容的时候，该应用程序根本没有显示任何样式。

这就是到目前为止我在webpack.config.js文件中的内容：

const path = require('path');
const BUILD_DIR = path.resolve(__dirname + '/public/build');
const APP_DIR = path.resolve(__dirname + '/src');
// This is the main configuration object.
// Here, you write different options and tell Webpack what to do
module.exports = {
experiments: {
asyncWebAssembly: true,
topLevelAwait: true,
layers: true // optional, with some bundlers/frameworks it doesn't work without
},
resolve: {
extensions: ['', '.js', '.jsx', '.css']
},
// Path to your entry point. From this file Webpack will begin its work
entry: [APP_DIR + '/index.js', APP_DIR + '/index.css', APP_DIR + '/App.css'],
// Path and filename of your result bundle.
// Webpack will bundle all JavaScript into this file
output: {
path: BUILD_DIR,
filename: 'bundle.js'
},
// Default mode for Webpack is production.
// Depending on mode Webpack will apply different things
// on the final bundle. For now, we don't need production's JavaScript 
// minifying and other things, so let's set mode to development
mode: 'development',
module: {
rules: [
{
test: /.js$/,
exclude: /(node_modules)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
},
{
test: /.css$/,
use: [
{ loader: 'style-loader' },
{
loader: 'css-loader',
options: {
modules: true,
},
},
{ loader: 'sass-loader' },
{ loader: 'postcss-loader' }
],
},
]
}
};

为了让css正常工作，我缺少什么吗？我只有两个文件，位于/src：App.css和index.css。它们似乎都没有加载，我在控制台中也没有错误。

Answer 1

rules: [
{
test: /.js|jsx$/,
exclude: /node_modules/,
loader: 'babel-loader'
},
{
test: /.(sass|scss|less|css)$/,
use: [
'style-loader',
'css-loader',
'sass-loader'
]
},
{
test: /.(png|jpe?g|svg|gif)$/,
loader: 'file-loader'
},
{
test: /.(woff|woff2|eot|ttf|otf)$/,
use: [
'file-loader',
]
},
{
test: /.css$/,
use: [
{
loader: 'url-loader',
options: {
limit: false
}
}
]
}
]