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

【问题标题】：How to use images in CSS that is used from Jade files rendered via Node.js如何在 CSS 中使用从通过 Node.js 呈现的 Jade 文件中使用的图像
【发布时间】：2015-11-18 09:29:11
【问题描述】：

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

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

我从server.js 渲染search.jade 文件。

在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 文件中，但我想知道这样做是否合适？

【问题讨论】：

标签： javascript css node.js pug

【解决方案1】：

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

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

所以也许在类似的代码中

style
  include:fullpaths-css css/tablesorter.css

fullpaths-css 将是您的 just-in-time 处理器，可能基于 postcss。

【讨论】：