node.js - 使用 connect-assets 的 Node Express 中的图像路径

Question

我正在尝试将 twitter-bootstrap 包含在 my project 中和 glyphicons-halflings 图像仅在同一目录 (assets/css/) 中工作，并且仅在 Chrome 中工作(不适用于 Firefox 和 Opera)。包括部分(文件“app.less”):

@import 'twitter-bootstrap/bootstrap';
@iconSpritePath: "/img/glyphicons-halflings.png";
@iconWhiteSpritePath: "/img/glyphicons-halflings-white.png";

我尝试使用各种选项:/img.. 、 img/.. 、/../img 、/gly... ，放置在公共(public)目录中(我想从 images 文件夹中使用它方式)，但它不起作用。也许我可以在连接 Assets 中设置此选项。 This文件夹图片。

仅包含项目 app.less 文件 != css('app')

在本例中，它适用于 Chrome。

更新:

现在我看到 Chrome 中的 url 始终是 http://localhost:3000/css/../img/glyphicons-halflings.png 转换为 http://localhost :3000/img/glyphicons-halflings.png 在 Firefox 中它总是 ../img/glyphicons-halflings.png (background-image: url("../img/glyphicons-halflings.png");) 无法加载。我对@iconSpritePath 的定义根本不起作用。

Answer 1

我正在使用 Bootstrap(使用 LESS 文件)和 Express。适用于所有浏览器。你必须安装 less-middleware 和 less moduel。这是我的代码:

app.use(require('less-middleware')({ src: __dirname + '/public' }));
app.use(express.static(path.join(__dirname, '/public' )));

和我的文件夹结构:

/public/img <-- the bootstrap img and the rest
/public/javascripts
/public/stylesheets

我唯一需要更改的是包含在 Bootstrap 较少的文件中。 例如来自:

// CSS Reset
@import "reset.less";

至

// CSS Reset
@import "/public/stylesheets/reset.less";