CSS 和 Node 表达问题答案

【问题标题】：CSS and Node express problemsCSS 和 Node 表达问题
【发布时间】：2020-05-13 04:39:46
【问题描述】：

所以，我只是在测试一些东西。

我正在使用 Express，只有 bodyelement CSS 选择器在工作。如果我删除了 body 标签，那么下一个容器可以工作，但以下容器不能。

当我在 Chrome 开发工具中检查网络时，它说我的 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}`);
    });

【问题讨论】：

标签： javascript html css node.js express

【解决方案1】：

好的，经过调试会话后，我们发现这与 Express 或 JavaScript 或与 HTML 的事件无关。

问题出在CSS 本身。（令人兴奋的对吧？）

浏览器根本不喜欢选择器后面的分号...

//styles.css
body{
    text-align: center;
    height: auto;
    width: 100%;
};  < ---------------------------------- SEE THIS ? :) 

.container1{
    width: 750px;
    height: 750px;
    background-color: saddlebrown;
};  < ---------------------------------- SEE THIS ? :)

因此，通过删除分号，一切都会按预期进行。

造型愉快！

【讨论】：

我很乐意提供帮助！ :)