Home/ Questions/Q 7719031
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-01T03:18:45+00:00

I have a verry simple style.less file in my project, and i’m using bootstrap

  • 0

I have a verry simple style.less file in my project, and i’m using bootstrap for a clean, responsive design. So here we go:

@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";

Now, when i compile the file with less, the css-output looks strange:

.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;
}

He’s just doubling everything! I can see this odd behavior even in the browser directly when im working on my devolper instance.

That’s so strange and awful, has anyone an idea why this is happening? In the original less-files that are imported from bootstrap, everything is defined only once.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Here’s two potential solutions. They both seem obvious, but I’ve overlooked BOTH of them at times…

    1. Are you seeing the duplicate style rules in the actual compiled css file? OR are you seeing duplicate rules in Firebug or Chrome’s developer tools? If it’s the second, go back and make sure your css file actually has duplicates.

    2. I had the exact same duplication problem while using LESS, and I couldn’t figure it out until I realized that I’d included the css twice in the <head>. It’s a silly mistake, but I’ve definitely done it before.

    Good luck.

    • 0