Question

我正在尝试在my project中添加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 ...，放置在公共目录中（我想从图像文件夹中使用它方式），但它不起作用。也许我可以在connect-assets中设置这个选项。 This文件夹图片。

包括仅投影app.less文件!= css('app')

在这种情况下，它适用于Chrome。

更新：

现在，我发现在Chrome网址中，网址总是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

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

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

Answer 2

我正在使用带快速的bootstrap（使用LESS文件）。适用于所有浏览器。你必须安装较少的中间件和较少的模块。这是我的代码：

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 less文件中的include。例如从：

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

到

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

Answer 3

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

节点中的图像路径用连接资产表示

3 个答案: