My FeedDiscussionsHeadless CMS
New
Sign in
Log inSign up
Learn more about Hashnode Headless CMSHashnode Headless CMS
Collaborate seamlessly with Hashnode Headless CMS for Enterprise.
Upgrade ✨Learn more

Unable to load CSS to express server (React Server-side rendering)

Mirza Irshad's photo
Mirza Irshad
·Aug 11, 2020·

3 min read

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; } Screenshot 2020-08-10 at 12.24.52 PM.png

```