Unable to load CSS to express server (React Server-side rendering)
This is my server setup
const path = require('path');
module.exports = { //Inform webpack that we're building a bundle for // Nodejs, rather than for the browser target: 'node',
// Tell webpack the root file of our server application
entry: './src/index.js',
//Tell webpack where to put the output file that is generated
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'build')
},
//Tell webpack to run babel on every file it runs through
module: {
rules: [
{
test: /\.js?$/,
loader: 'babel-loader',
exclude: /node_modules/,
options: {
presets: [
'@babel/react',
['@babel/env', { targets: { browsers : [ 'last 2 versions' ]}}]
]
}
},
{
test: /\.css?$/,
exclude: /node_modules/,
use: [ 'style-loader', 'css-loader' ]
},
{
test: /\.(png|j?g|svg|gif)?$/,
exclude: /node_modules/,
use: 'url-loader'
}
]
}
}
This is my Home component
import React from 'react'; import './Home.css';
const Home = () => { return (
<div> <div className="text"> I'm the very very Home component wit SSr done with express</div> <button onClick={()=> console.log('Hi There!')}>Press me!</button> </div>
) }; export default Home;
this is my home.css
body { background-color: greenyellow; } text { color: red; font-size: 100px; }
```