2

我正在尝试将 twitter-bootstrap 包含在我的项目中，并且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...，放置在公共目录中（顺便说一下，我想从图像文件夹中使用它），但它不起作用。也许我可以在连接资产中设置这个选项。此文件夹图片。

包括仅投影 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 的定义根本不起作用。

4

3 回答 3

1

我查看了您的代码，并将 glyphicon 文件复制到 public/img 文件夹树中，它对我有用。

我在https://github.com/TrevorBurnham/connect-assets中没有看到任何关于它能够支持图像的内容，所以我认为这是问题所在。

于 2012-08-26T16:29:55.417 回答
1

我正在使用引导程序（使用 LESS 文件）和 express。适用于每个浏览器。您必须安装较少的中间件和较少的模块。这是我的代码：

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

我唯一需要更改的是引导程序较少文件中的包含。例如来自：

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

到

// CSS Reset
@import "/public/stylesheets/reset.less";
于 2012-08-26T17:41:30.397 回答
0

我有一个类似的问题，但它与 css 文件中的路径无关。我只是想在“资产/图像”中引用一个图像，但是当我使用它时assetPath('images/logo.png')，它说它找不到它。connect-assets（或者可能是 mincer）似乎做的是从资产中剥离第一个目录。为了引用您的图像，您需要在没有路径的情况下指定它，例如assetPath('logo.png').

于 2014-12-21T00:10:27.610 回答