Question

我是NodeJS的新手，我使用Express来提供我的pug文件/视图。此外，我使用＆＃34; express-sass-middleware＆＃34;编译和提供scss / css文件。一切都很好，但不幸的是，CSS没有应用。

我的app.js文件如下：

var express = require('express');
var sassMiddleware = require('express-sass-middleware');
var app = express();
app.set('view engine', 'pug');

app.get('/css/bootstrap.css', sassMiddleware({
  file: 'css/bootstrap.scss', // the location of the entry point,
                                     // this can also be a directory

  precompile: true,                   // should it be compiled on server start
                                     // or deferred to the first request
                                     //  - defaults to false
}));

app.get('/', function (req, res) {
    res.render('index', {
        varTitle: 'Hello World'
    });
});

app.listen(3000, function() {
    console.log('Example app listening on port 3000!');
});

我的简单css文件如下：

// $icon-font-path: /3rdparty/fonts;

// @import 'bootstrap/bootstrap';
// @import './node_modules/bootstrap-sass/assets/stylesheets/bootstrap/variables';

body
{
    background-color: green;
    font-size: 100px;
}

我的index.pug文件是：

doctype html
html(lang='en')
  head
    title= varTitle
    link(ref='stylesheet' type='text/css' href='/css/bootstrap.css')
  body
    h1= varTitle

现在，当我使用＆＃34;节点app.js＆＃34;启动我的网络服务器时，访问http://localhost:3000，我看到＆＃34; Hello World＆＃34;但不幸的是身体背景不是绿色，文字也不是100px。这意味着不应用css文件。但是当我访问http://localhost:3000/css/bootstrap.css时，我看到了有效的css文件。

任何人都知道我在这里失踪了什么？我有点困惑，我直接访问它时看到CSS源，但浏览器没有应用CSS样式。我已经尝试过不同的浏览器但没有成功。他们都没有应用css文件。

Answer 1

您在index.pug文件中输入错误以加载css文件。您之前提到过ref，而它应该是rel。

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

很高兴为您提供帮助。

Answer 2

您似乎没有从您的nodejs服务器代码提供静态文件。您必须添加css目录才能允许从您的html代码访问：

app.use('/static', express.static('public'))

现在，您可以从/ static路径前缀加载公共目录中的文件。

http://localhost:3000/static/images/kitten.jpg
http://localhost:3000/static/css/style.css
http://localhost:3000/static/js/app.js
http://localhost:3000/static/images/bg.png
http://localhost:3000/static/hello.html

具有Express和SASS的Node.JS - 未应用编译的CSS文件

2 个答案: