nodejs cannot render css-Front-end Q&A-php.cn

nodejs cannot render css

WBOY

Release： 2023-05-25 13:29:37

Original

529 people have browsed it

When developing web applications, we usually use HTML, CSS and JavaScript to build pages. For Node.js developers, it is common to encounter CSS failure to render when using Node.js to render pages.

In Node.js, we can use some template engines such as EJS, Handlebars or Pug to render HTML pages. Generally speaking, we will reference CSS files in HTML files, but when we use Node.js to render the page on the server side, sometimes the CSS files are not referenced correctly.

This problem is usually caused by the browser security policy, which does not allow CSS files to be loaded from different sources. Let’s look at some solutions below.

Using static file middleware

When we use Node.js to render the page, we need to use some static file middleware to allow the server to load static files correctly document. Express.js is a very commonly used Node.js framework. It comes with static file serving middleware express.static.

The following is an example of using Express.js to load static files:

const express = require('express');
const app = express();

app.use(express.static('public'));

Copy after login

In this example, we store our static files in the public directory. After using express.static, the browser can load our static files correctly, including CSS files.

Modify CSS file path

When using Node.js to render a page, we may use some routing framework to handle routing. If we use the / root route in the router, the browser may not be able to load the CSS file.

This is because the browser will resolve / to the server root path instead of the current page path. To solve this problem, we can use relative paths to reference CSS files, or use a relative path in the routing path.

The following is a sample code that uses relative paths to reference CSS files:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Node.js渲染不出CSS</title>
    <link rel="stylesheet" href="./styles.css" />
</head>
<body>
    <h1>Node.js渲染不出CSS</h1>
</body>
</html>

Copy after login

In this example, we use ./ to reference sibling directories styles.css file under. If our CSS file is in the upper-level directory, we can use ../ to reference the file.

Using CDN

When we develop web applications using Node.js, we can use CDN to load CSS files. This method does not require saving the CSS file on the server, but saves the CSS file on the CDN server, and then loads the CSS file through the CDN link.

Taking Bootstrap as an example, we can use the following code in the HTML file to load Bootstrap:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Node.js渲染不出CSS</title>
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css" />
</head>
<body>
    <div class="jumbotron">
        <h1>Node.js渲染不出CSS</h1>
        <p>解决起来也很简单哦！</p>
    </div>
</body>
</html>

Copy after login

In this example, we use Bootstrap’s CDN link to load the CSS file.

Summary

The above are three methods to solve the problem that Node.js cannot render CSS: use static file middleware, modify the CSS file path and use CDN. When we develop web applications, we should pay attention to correctly referencing CSS files to HTML pages to avoid the problem that CSS cannot be rendered.

The above is the detailed content of nodejs cannot render css. For more information, please follow other related articles on the PHP Chinese website!