I have added
app.use(express.static(path.join(__dirname, 'public')));app.js file.
Now I am using bootstrap.css along with my custom CSS file main.css.
index.html:
┊ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
┊ <link rel='stylesheet' type="text/css" href='bootstrap/theme/bootstrap.united.css' />
┊ <link rel='stylesheet' type="text/css" href='bootstrap/css/main.css' />
main.css:
1 body {
2 background-color: red;
3 }
Here is how my file structure looks like:
public
├── bootstrap
│ ├── css
│ │ ├── bootstrap.css
│ │ └── bootstrap.min.css
│ ├── js
│ │ ├── bootstrap.js
│ │ └── bootstrap.min.js
│ └── theme
│ └── bootstrap.united.css
├── css
│ └── main.css
└── jQuery
└── jquery-1.12.0.min.js
My node server can be accessed at 127.0.0.1:3000.
In my Chrome browser, the bootstrap.united.css is working fine,
however, the main.css is not being applied.
I am able to load it directly from
http://10.0.8.88:3000/css/main.cssWhat could be causing the issue where main.css loads but doesn't seem to work properly?