Итак, я просто тестирую некоторые вещи.
Я использую Express и работает только селектор body element CSS. Если я удаляю тег body, то следующий контейнер работает, но следующие не работают.
Когда я проверяю сеть в Chrome dev tools, он говорит, что мой CSS файл получен.
Я также пытался изменить app.use(express.static(path.join(__dirname, '/public'))) на app.use(express.static('public'), и это ЕЩЕ НЕ работало. JavaScript выборка работает нормально. Я в своем уме!
Есть дополнительный код для вещей, которые я хочу сделать позже, например body-parser и sqlite3.
HTML:
//index.html
<html lang="en">
<head>
<meta charset="UTF-16">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="/styles.css">
<title>Document</title>
</head>
<body>
<div class="container1">
<h1>Here is some test fetch!</h1>
<button id="fetchBtn" class="btnStyle">Click ME!</button>
<div id="response">Hey</div>
</div>
<div class="container2">
<p>Test</p>
</div>
<div class="container3">
<p>Test</p>
</div>
<script src="script.js"></script>
</body>
</html>
CSS:
//styles.css
body{
text-align: center;
height: auto;
width: 100%;
};
.container1{
width: 750px;
height: 750px;
background-color: saddlebrown;
};
.container2{
width: 750px;
height: 750px;
display: flex;
justify-content: center;
background-color: blue;
};
.container3{
width: 750px;
height: 750px;
display: flex;
justify-content: center;
background-color: green;
};
Javascript:
//server.js
const express = require('express');
const app = express();
const sqlite3 = require('sqlite3');
const db = new sqlite3.Database('./acs-1-year-2015.sqlite');
const morgan = require('morgan');
const bodyParser = require('body-parser');
const path = require('path');
const PORT = process.env.PORT || 4001;
app.use(bodyParser.json());
app.use(morgan('dev'));
app.use(express.static(path.join(__dirname, '/public')));
app.get('/users', (req, res, next) => {
db.all("SELECT* FROM states", (err, rows) => {
res.json({rows:rows});
});
});
app.listen(PORT, () => {
console.log(`We are listening on PORT ${PORT}`);
});