更新时间:2022-10-31 17:55:31
运行lessc时,使用 - relative-urls 标志。
lessc --relative-urls
文档记录不良, false,这意味着所有@imported文件将保持它们的urls(例如background-image,font-face等)。这是因为更少的已经在做这个,并且许多用户希望它留下他们的urls单独。
当使用relative-urls标志时,lessc重写所有的URL到
/dir1/style/main.less
//如果您不包括lessc将留下引导
//作为减少css文件顶部的@import
@import(less)'../bootstrap/bootstrap.min.css';
/dir1/lib/bootstrap/bootstrap.min.css p>
background-image:url(../ img / bs-img.gif);
结果:
dir1 / style / main.css
background-image:url(../ bootstrap / img / bs -img.gif);
I am using LESS to organize and import all my CSS files. I am also using Twitter Bootstrap which I integrated inside my style.less. It works fine like below however when I use lessc to minify the less file and compress it to one all hell breaks loose with my twitter bootstrap css. The reason is that my bootstrap.min.css
has a relative path to images as "../img"
so when I minify all these files and dump my output file, it no longer finds this path.
How exactly should I fix this, I don't want to be hardcoding absolute urls in my css?
style.less
@import './folder_one/file_one';
@import './folder_one/file_two';
@import './folder_two/file_one';
@import './folder_three/file_one';
// this bootstrap css references images relatively ../img/
@import './bootstrap/bootstrap.min.css';
When running lessc use the --relative-urls flag.
lessc --relative-urls
It's poorly documented, but by default it is false which means that all @imported files will maintain their urls (e.g. background-image, font-face, etc) as they are. This is because less was already doing this and many users expect it to leave their urls alone.
When the relative-urls flag is used, lessc rewrites all of the urls according to the location of the less/css file being imported.
Example
/dir1/style/main.less
// if you don't include (less) lessc will leave bootstrap
// as an @import at the top of the lessified css file
@import (less) '../bootstrap/bootstrap.min.css';
/dir1/lib/bootstrap/bootstrap.min.css
background-image:url("../img/bs-img.gif");
Result:
/dir1/style/main.css
background-image:url("../bootstrap/img/bs-img.gif");