what can I do that "bootstrap/less/bootstrap.less" is not overwriting all my css -styles (I could only use the .less files I only needed(e.g.: bootstrap/less/buttons.less ), but I need all classes). When I import "bootstrap/less/bootstrap.less" it's going to overwrite my bootstrap menu and all standard selectors like input, textarea ..., but I want only to overwrite the css classes i want, but not everything ... thanks :)
[UPDATED: 09-04-2014]
Background information for my project: Important NuGet Pakages:
- Bootstrap (v 3.0.0 ) -> imported in the master page
- Bootstrap.Less (v 2.3.2 ) ->these files I use for impor in "Site.less")
- dotless (v 1.4.0.0)
- html5shiv (v 0.1.0.8)
- Modernizr (v 2.6.2) -> imported in the master page
- Respond JS (v 1.2.0)
Visual Studio 2013
- MVC5
my "Site.less" looks like
/*@import "bootstrap/less/buttons.less";*/
@import "bootstrap/less/bootstrap.less";
.BWButton {
.btn;
}
Its a little bit strange when I only import "bootstrap/less/bootstrap.less" everthing is going to be overwritten, it doesn't matter which order of the css/less import I have made in the master page and when I use only "@import "bootstrap/less/buttons.less"" no effect is on the page not even if I remove all css/less imports in the master page...But intelli sense works on both imports("bootstrap/less/buttons.less" and "bootstrap/less/bootstrap.less") (when imported inside the site.less), but on the client site Site.less(when i import "bootstrap/less/buttons.less" before in site.less ) is empty(when I select "Site.less" in fire bug)..
my master.page(Shared/_Layout.cshtml) looks in the header like this:
@Scripts.Render("~/bundles/modernizr")
@Styles.Render("~/Content/dataTable.css")
@Styles.Render("~/Content/popup.css")
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
@Styles.Render("~/Content/Site.less")
@Styles.Render("~/Content/bootstrap.css")
@Styles.Render("~/Content/site.css")
the output on the client side:
<script src="/speScripts/modernizr-2.6.2.js">
<link rel="stylesheet" href="/Content/dataTable.css">
<link rel="stylesheet" href="/Content/popup.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
<link rel="stylesheet" href="/Content/Site.less">
<link rel="stylesheet" href="/Content/bootstrap.css">
<link rel="stylesheet" href="/Content/site.css">
May be this helps you a little bit more :)
