Having an issue with my React app. Upon successfully compiling Webpack and serving the content, no styles are displayed within the app.
This is the current content of my webpack.config.js file:
const path = require('path');
const BUILD_DIR = path.resolve(__dirname + '/public/build');
const APP_DIR = path.resolve(__dirname + '/src');
module.exports = {
experiments: {
asyncWebAssembly: true,
topLevelAwait: true,
layers: true
},
resolve: {
extensions: ['', '.js', '.jsx', '.css']
},
entry: [APP_DIR + '/index.js', APP_DIR + '/index.css', APP_DIR + '/App.css'],
output: {
path: BUILD_DIR,
filename: 'bundle.js'
},
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' }
],
},
]
}
};
Any idea what might be causing the css not to load? Only two files exist in /src: App.css and index.css. No errors found in the console.