How to refer a css file from index.html in React

Question

I have a folder called assets which have a styles.css and then I have index.html which I would want to reference styles.css but for some reason it can't.

My current solution is this:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>My App</title>
        <link rel="stylesheet" href="/styles.css">

    </head>
    <body>
        <div id="app"></div>
        <script type="text/javascript" src="/bundle.js"></script>
    </body>
</html>

And I have the node server running like this:

var webpack = require("webpack");
var config = require("./webpack.config.js");

var http = require('http');
var express = require('express');
var app = express();
var proxy = require('http-proxy-middleware');
var path = require('path');

const compiler = webpack(config);


app.use(require("webpack-dev-middleware")(compiler, {
  noInfo: true,
  publicPath: "/"
}));

app.use(require("webpack-hot-middleware")(compiler));

app.use('/auth', proxy('http://localhost:8081', {changeOrigin: true}));
app.use('/api', proxy('http://localhost:8081', {changeOrigin: true}));

app.get("*", function(req, res) {
  res.sendFile(__dirname + '/index.html');
});

/**
 * Anything in public can be accessed statically without
 * this express router getting involved
 */

app.use(express.static(path.join(__dirname, 'assets'), {
  dotfiles: 'ignore',
  index: false
}));

var server = http.createServer(app);
server.listen(3000, function() {
  console.log("express listening at localhost:3000");
});

This is not working for me it cannot find the css file, how can I make it so I can reference the css file from index.html. Also I have index.js on my src folder which is used as an entrance file for running the whole React App.

When you open up your web console and go into the network tab, does the css file load? — lumio
– lumio, Commented Oct 19, 2018 at 21:17

kost · Accepted Answer · 2018-10-19 21:19:49Z

1

Add the route for styles.css before app.get("*",...)

app.get("/styles.css", function(req, res) {
  res.sendFile(__dirname + '/styles.css');
});

answered Oct 19, 2018 at 21:19

kost

7298 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

kost Over a year ago

Need more debug information: your directories structure, the console output.

Collectives™ on Stack Overflow

How to refer a css file from index.html in React

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related