LESS 导入 CSS 和相对路径
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12813400/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
LESS importing CSS and relative paths
提问by user391986
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.csshas 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.
我正在使用 LESS 来组织和导入我所有的 CSS 文件。我也在使用 Twitter Bootstrap，它集成在我的 style.less 中。它像下面一样工作正常，但是当我使用lessc来缩小less文件并将其压缩为一个时，我的twitter bootstrap css完全崩溃了。原因是我bootstrap.min.css有一个图像的相对路径，"../img"所以当我缩小所有这些文件并转储我的输出文件时，它不再找到这个路径。
How exactly should I fix this, I don't want to be hardcoding absolute urls in my css?
我到底应该如何解决这个问题，我不想在我的 css 中硬编码绝对 url？
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';
回答by Planky
When running lessc use the --relative-urlsflag.
运行 lessc 时，请使用 --relative -urls标志。
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.
它的文档很差，但默认情况下它是假的，这意味着所有@imported 文件都将按原样保留它们的 url（例如 background-image、font-face 等）。这是因为 less 已经这样做了，而且许多用户希望它不理会他们的 url。
When the relative-urls flag is used, lessc rewrites all of the urls according to the location of the less/css file being imported.
当使用relative-urls 标志时，lessc 根据导入的less/css 文件的位置重写所有的url。
Example
例子
/dir1/style/main.less
/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
/dir1/lib/bootstrap/bootstrap.min.css
background-image:url("../img/bs-img.gif");
Result:
结果：
/dir1/style/main.css
/dir1/style/main.css
background-image:url("../bootstrap/img/bs-img.gif");
回答by posit labs
Check out the docs for command line usage.
https://github.com/cloudhead/less.js/wiki/Command-Line-Usage. There's an option called --root-paththat will prepend existing urls so that they will work in the output css file.
查看文档以了解命令行用法。
https://github.com/cloudhead/less.js/wiki/Command-Line-Usage。有一个名为的选项--root-path将预先添加现有的 url，以便它们在输出 css 文件中工作。
lessc [option option=parameter ...] <source> [destination]
lessc -rp=will/be/prepended sourcefile.less path/to/destination
For example:
例如：
Here is the original url, with the file in css/src/nest
这是原始网址，文件在 css/src/nest
background-image: url('../../../imgs/bg.png');
And this is what I would do on the command line. Note that the -rpargument should point from the output directory to the original file location
这就是我将在命令行上执行的操作。请注意，-rp参数应从输出目录指向原始文件位置
lessc -rp=src/nest css/src/nest/nesty.less css/nesty.less
And the output, with the file in css/
和输出，文件在 css/
background-image:url('src/nest/../../../imgs/bg.png')
There is a --relative-urlsoption, but I can't get it to work. I'm working build script that uses the workaround I described above. Build-o-Matic
有一个--relative-urls选项，但我无法让它工作。我正在使用我上面描述的解决方法构建脚本。Build-o-Matic
This is how I handled determining the path [link]
这就是我处理确定路径的方式[链接]
回答by sanmai
--relative-urlsflag has its in-browser counterpart.
--relative-urlsflag 有其在浏览器中的对应物。
<script>
less = {
env: "development",
relativeUrls: true
};
</script>
<script src="less.min.js"></script>
