Menu
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.
697
Here's two potential solutions. They both seem obvious, but I've overlooked BOTH of them at times...
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.
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.
160
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
