静态css不显示在快递翡翠中

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 下创建另一个公共目录，这不是您想要的。

尝试将项目中的样式表重新组织成这样：

/stylesheets
  /pag
    /css
      bootstrap.min.styl

然后把你的中间件改成这样：

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