Nodejs Jade模版中引入css文件

Nodejs Jade模版中引入css文件

这个问题我是在看《Node.js入门经典》的时候遇到的。

一开始我使用的代码如下： link(rel=‘stylesheet’, href=‘http://twitter.github.com/bootstrap/1.4.0/bootstrap.min.css’) 这样引入css文件，可以正常显示css效果。

后来，我尝试使用引入本地css文件，代码如下： link(rel=‘stylesheet’, href=‘bootstrap.css’) 备注：为了方便测试，这里我将css文件和引入它的jade模版放在一个文件夹下的。 这时候，该css效果无法显示。

折腾了一下午还是没想明白，只好到社区向各位大大求助了，万分感谢~~~


6 回复

Nodejs Jade模版中引入css文件

这个问题我是在看《Node.js入门经典》的时候遇到的。

初始尝试

一开始我使用的代码如下：

link(rel='stylesheet', href='http://twitter.github.com/bootstrap/1.4.0/bootstrap.min.css')

这样引入CSS文件，可以正常显示CSS效果。但是，这种方式依赖于外部网络资源，一旦网络不稳定或者服务器出现问题，就会影响到页面的展示效果。

引入本地CSS文件

后来，我尝试使用引入本地CSS文件，代码如下：

link(rel='stylesheet', href='bootstrap.css')

备注：为了方便测试，这里我将CSS文件和引入它的Jade模版放在一个文件夹下的。

这时候，该CSS效果无法显示。

经过一番调试后，发现原因在于路径设置不正确。在Jade模版中引入本地CSS文件时，需要确保路径是相对于静态资源目录（如public）的。

解决方案

假设你的项目结构如下：

project-root/
├── public/
│   ├── css/
│   │   └── bootstrap.css
│   └── index.jade
└── app.js

你需要在Jade模版中这样写：

link(rel='stylesheet', href='/css/bootstrap.css')

同时，在Express应用中需要配置静态资源目录，以便正确地处理这些请求：

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

// 配置静态资源目录
app.use(express.static('public'));

app.get('/', (req, res) => {
    res.render('index');
});

app.listen(3000, () => {
    console.log('Server is running on port 3000');
});

通过以上步骤，你可以确保Jade模版能够正确加载本地CSS文件，并且页面样式能够正常显示。


chrome/firefox 开console看什么错

多谢！ 不仅告诉了我怎么做，还告诉了我为什么。 握个爪，哈哈~

您这么一提醒，我倒是想起来了。这书一开始讲目录结构的时候就提过所有静态文件应该放在public文件夹下。是我粗心了<del>惭愧</del>~再次感谢~~~

用了 app.set(‘views’, __dirname + ‘/views’); app.use(express.static(path.join(__dirname, ‘public’))); 也不行 啊 为什么 还是404 not find

在Node.js应用中使用Jade（现称为Pug）模板引擎时，正确地引用CSS文件需要确保路径正确，并且服务器能够正确地提供静态文件。你的问题可能出在CSS文件路径或服务器配置上。

示例代码

假设你的项目结构如下：

/myapp
  /public
    stylesheets
      bootstrap.css
  /views
    index.jade
  app.js

app.js 配置静态文件服务

首先，在你的Express应用中配置静态文件服务，使Express知道在哪里寻找静态文件（如CSS文件）。

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

const app = express();

// 设置静态文件目录
app.use(express.static(path.join(__dirname, 'public')));

// 渲染index.jade
app.get('/', (req, res) => {
  res.render('index');
});

const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
  console.log(`Server is running on port ${PORT}`);
});

index.jade 文件

然后，在你的Jade模板中正确引用CSS文件：

doctype html
html
  head
    title My Node.js App
    link(rel='stylesheet', href='/stylesheets/bootstrap.css')
  body
    h1 Hello World!
    p This is a test.

关键点解释

  • 路径问题：在引用本地CSS文件时，你需要指定从根静态文件目录开始的相对路径（例如，/stylesheets/bootstrap.css）。这确保了浏览器能够正确地请求CSS文件。

  • 静态文件服务：通过调用app.use(express.static(...))，你告诉Express去哪里查找客户端的静态资源（如HTML、CSS、JS文件等）。在这个例子中，我们设置public文件夹为静态文件目录，所以所有子目录（包括stylesheets）都可以被直接访问。

通过上述步骤，你应该能够在Jade模板中成功引入并应用本地CSS文件。如果仍然有问题，请检查网络请求是否成功加载了CSS文件，可以通过浏览器开发者工具查看网络请求。

回到顶部