After setting up a node, express, react app, I realized that when express serves static content like my CSS file, the source of the index.html shows an additional style tag in the head section:
<style type="text/css">* {}</style>I confirmed that this extra style code is not present in the actual file. So where did it come from?
Moreover, although I can see that the CSS file is loading correctly in the Chrome network tab, I am unable to see my CSS styles applied on the page. Strangely, Bootstrap styles are rendering just fine and they are both being served in the same manner. What could be causing this issue?
This is how my server is setup:
var express = require('express'),
bodyParser = require('body-parser'),
http = require('http'),
path = require('path');
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
app.use(express.static(path.join(__dirname, 'public')));
app.use(cors());
app.get('*', function(req, res) {
res.sendFile(path.join(__dirname, 'public', 'index.html'));
});
http.createServer(app).listen(8080), function () {
console.log('Express server listening on port 8080');
});Here is a snippet of the CSS code I have:
body{
color: red;
}