LESS导入CSS和相对路径 [英] LESS importing CSS and relative paths

问题描述

我使用LESS来整理和导入我的所有CSS文件。我也使用Twitter Bootstrap，我集成在我的style.less里面。它工作正常像下面，但是当我使用lessc来缩小较少的文件，并压缩它一个地狱与我的twitter bootstrap css松脱。原因是我的 bootstrap.min.css 有一个相对于图像的路径../ img当我缩小所有这些文件并转储我的输出文件，它不再找到这个路径。

我应该如何解决这个问题，我不想在我的css中硬编码绝对url？

  style.less 
 @import'./folder_one/file_one'; 
 @import'./folder_one/file_two'; 
 @import'./folder_two/file_one'; 
 @import'./folder_three/file_one'; 
 //这个引导css引用图像相对../img/ 
 @import'./bootstrap/bootstrap.min.css'; 
  

解决方案

运行lessc时，使用 - relative-urls 标志。

  lessc --relative-urls 
  

文档记录不良， false，这意味着所有@imported文件将保持它们的urls（例如background-image，font-face等）。这是因为更少的已经在做这个，并且许多用户希望它留下他们的urls单独。

当使用relative-urls标志时，lessc重写所有的URL到

$ b

/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");

这篇关于LESS导入CSS和相对路径的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！