css - 静态 css 不显示在 express jade 中

Question

编辑为 ilollar 答案(同样的问题) 我有 app.coffee :

pp.configure ->
  publicDir = "#{__dirname}/public"

app.set "views", viewsDir
app.set "view engine", "jade"

app.use(stylus.middleware debug: true, src: viewsDir, dest: publicDir, compile: compileMethod)
app.use(express.static(publicDir))

compileMethod = (str, path) ->
  stylus(str)
    .set('filename', path)
    .set('compress', true)


app.get "/pag",(req,res) ->
  res.render "pag",
  title: "test",

在/stylesheet/pag.jade 中:

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

当我转到“myserver:9090/pag”时，页面未加载 bootstrap.min.css。 我收到以下错误:

source :(my folder of proyects)/views/pag/css/bootstrap.min.styl
dest : (my folder of proyects)/public/pag/css/bootstrap.min.css
read : (my folder of proyects)/views/pag/css/bootstrap.min.styl
Error: ENOENT, open '(my folder)/views/pag/css/bootstrap.min.styl'

我哪里错了？我可能遗漏了什么……有什么想法吗？

Answer 1

首先，如果您还没有设置 ExpressJS 来提供静态文件，您需要这样做:

app.use(express.static(__dirname + '/public'));

然后，从您的样式表调用中删除“public”:

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

您将“public”设置为提供静态文件的应用程序根目录，因此无需在调用中指定“public”——“public”现在是根目录。

更新:
您的 viewsDir 设置为什么？由于您已将 Stylus 中间件的源设置为该目录，因此它正在寻找要呈现的 styl。

您将“public”设置为目标目录 - 如果您在调用中包含“public”，它只会在 public 下创建另一个公共(public)目录，这不是您想要的。

尝试将元素中的样式表重组为如下所示:

/stylesheets
  /pag
    /css
      bootstrap.min.styl

然后将您的中间件更改为:

app.use(stylus.middleware debug:true, src:'/stylesheets', dest: publicDir, compile: compileMethod)