I'm trying to include twitter-bootstrap in my project and glyphicons-halflings
images work only in the same directory (assets/css/
) and only in Chrome (not in Firefox and Opera). Including part (file 'app.less'):
@import 'twitter-bootstrap/bootstrap';
@iconSpritePath: "/img/glyphicons-halflings.png";
@iconWhiteSpritePath: "/img/glyphicons-halflings-white.png";
I tried to use a variety of options: /img.. , img/.. , /../img , /gly..., place in a public dir (I want to use it from images folder by the way), but it's not working. Perhaps I could set this option in connect-assets. This folders picture.
Including to project only app.less file != css('app')
In this case it works for Chrome.
UPDATE:
Now I see that in Chrome url is always http://localhost:3000/css/../img/glyphicons-halflings.png
that transform to http://localhost:3000/img/glyphicons-halflings.png
and in firefox it's always ../img/glyphicons-halflings.png
(background-image: url("../img/glyphicons-halflings.png");
) that unable to load. My defenition of @iconSpritePath doesn't work at all.
I took a look at your code, and simply copied the glyphicon files into the public/img folder tree and it's working for me.
I don't see any mention in https://github.com/TrevorBurnham/connect-assets about it being able to support images, so I assume this was the problem.
i'm using bootstrap(using the LESS files) with express. works in every browser. you have to install less-middleware and less moduel. here's my code:
app.use(require('less-middleware')({ src: __dirname + '/public' }));
app.use(express.static(path.join(__dirname, '/public' )));
and my folder structure:
/public/img <-- the bootstrap img and the rest
/public/javascripts
/public/stylesheets
the only thing i did have to change was the includes in the bootstrap less files. e.g. from:
// CSS Reset
@import "reset.less";
to
// CSS Reset
@import "/public/stylesheets/reset.less";
I had a similar problem but it was unrelated to paths in css files. I was just trying to reference an image in 'assets/images' but when i used assetPath('images/logo.png')
, it said it couldn't find it. What connect-assets (or perhaps mincer) seems to do is strip the first directory from the assets. In order to reference your image, you need to specify it without the path e.g. assetPath('logo.png')
.