Question

我的一个Node.js项目中有以下目录结构：

/web
  /views
    /css
      asc.gif
      bg.gif
      desc.gif
      tablesorter.css
    index.jade
    search.jade
  server.js

我从search.jade呈现server.js个文件。

在search.jade文件中，我包含tablesortes.css文件：

style
  include css/tablesorter.css

tablesorter.css如下所示：

/* tables */
table.tablesorter thead tr .header {
    background-image: url(bg.gif);
    background-repeat: no-repeat;
    background-position: center right;
    cursor: pointer;
}
table.tablesorter thead tr .headerSortUp {
    background-image: url(asc.gif);
}
table.tablesorter thead tr .headerSortDown {
    background-image: url(desc.gif);
}

如您所见，它取决于位于同一目录中的.gif文件。

问题是我的代码没有看到这些.gif文件（tablesorter.css文件中的所有其他样式都能正常工作）。

我目前使用的解决方法是以下代码

app.use(express.static('views/css'));

放在server.js文件中，但我想知道它是否适合这样做？

Answer 1

您当前的解决方案似乎很简单，但在CSS中使用完整路径可能是另一种选择。

您可以手动添加完整路径，也可以使用某个处理器为您执行此操作。这可以通过您选择的预处理器在编译时或在包含上使用定制的Jade filter（the page的底部）

所以也许在像

这样的代码中

style
  include:fullpaths-css css/tablesorter.css

fullpaths-css将是您的即时处理器，可能基于postcss。

如何在CSS中使用从通过Node.js呈现的Jade文件中使用的图像

1 个答案: