1

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 :)

user254197
  • 883
  • 2
  • 9
  • 31
  • You can import Bootstrap files *before* your own classes (so your classes will override BS classes instead). Also your requirements seem to be somewhat contradictory: "but I need all classes" and "but not everything" (if you don't want bootstrap's `input, textarea` stuff etc. just don't import corresponding `forms.less` etc.). – seven-phases-max Apr 08 '14 at 16:22
  • Ty for your support. My aim is to have the same class names for every project(which I declare in Site.less) and than I just inherit from bootstrap(use mixin) and use my own classes...hope this helps(I also updated my post) – user254197 Apr 09 '14 at 07:26
  • See http://lesscss.org/features/#import-options-reference – seven-phases-max Apr 09 '14 at 08:34
  • thank you. But when I want to add "@import (reference) "bootstrap/less/bootstrap.less";" vs2013 tells me " expected a media queri or a semicolon" -what is the problem here ? – user254197 Apr 10 '14 at 07:21
  • It's just the `dotless` that provides quite outdated Less implementation. – seven-phases-max Apr 10 '14 at 17:33

1 Answers1

2

In your html , make sure you include your own stylesheet at last !

<head> 
    <link href="includes/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="includes/css/style.css" rel="stylesheet">
</head>

In my example above, my custom stylesheet will overrule the bootstrap.min.css sheet.

developers-have-no-vacation
  • 642
  • 1
  • 5
  • 13