Question

我的项目中有一个简单的style.less文件，我正在使用bootstrap来获得干净，响应迅速的设计。所以我们走了：

@import "bootstrap/bootstrap.less";

@import "../css/jquery.vegas.css";
@import "../css/jquery.fancybox-1.3.4.css";

body {
  padding-top: 60px;
  padding-bottom: 40px;
}

@import "bootstrap/responsive.less";

现在，当我用less编译文件时，css-output看起来很奇怪：

.container {
  width: 940px;
  margin-left: auto;
  margin-right: auto;
  *zoom: 1;
  *zoom: 1;
  width: 940px;
  margin-left: auto;
  margin-right: auto;
  *zoom: 1;
  *zoom: 1;
}

他只是加倍一切！我甚至可以在我的devolper实例上直接在浏览器中看到这种奇怪的行为。

那是如此奇怪和可怕，有谁知道为什么会这样？在从引导程序导入的原始较少文件中，所有内容仅定义一次。

Answer 1

这是两个可能的解决方案。它们看起来都很明显，但我有时会忽略它们......

您是否在实际编译的css文件中看到了重复的样式规则？或者您是否在Firebug或Chrome的开发人员工具中看到了重复的规则？如果它是第二个，请返回并确保您的css文件实际上有重复。
在使用LESS时我遇到了完全相同的重复问题，直到我意识到我已经在<head>中包含了两次css之前我无法解决这个问题。这是一个愚蠢的错误，但我以前肯定做过。

Answer 2

确保您使用的是最新版本的LESS。

@import的默认行为如果从不同的文件中多次调用，则不会非常聪明。

因此引入了指令@import-once，以确保只使用少量文件，只包含一个特定的文件。

然而，即使您只使用@import-once，他们现在也将@import行为设为默认行为。

另请参阅：what is the LESS CSS statement @import-once good for?

少编译器使一切都加倍

2 个答案: