“bootstrap/less/bootstrap.less”覆盖所有选择器（与 2013 相比）答案

【问题标题】："bootstrap/less/bootstrap.less" overwriting all Selectors (vs 2013)“bootstrap/less/bootstrap.less”覆盖所有选择器（与 2013 相比）
【发布时间】：2014-05-21 11:06:23
【问题描述】：

我能做什么，“bootstrap/less/bootstrap.less”不会覆盖我所有的 css 样式（我只能使用我只需要的 .less 文件（例如：bootstrap/less/buttons.less），但是我需要所有课程）。当我导入“bootstrap/less/bootstrap.less”时，它将覆盖我的引导菜单和所有标准选择器，如输入、textarea ......，但我只想覆盖我想要的 css 类，但不是所有...... 谢谢:)

[更新日期：2014 年 9 月 4 日]

我的项目的背景信息：重要的 NuGet 包：

Bootstrap (v 3.0.0) -> 在母版页中导入
Bootstrap.Less (v 2.3.2) -> 这些文件我用于导入 “无站点”）
无点 (v 1.4.0.0)
html5shiv (v 0.1.0.8)
Modernizr (v 2.6.2) -> 在母版页中导入
响应 JS (v 1.2.0)

Visual Studio 2013

MVC5

我的“Site.less”看起来像

/*@import "bootstrap/less/buttons.less";*/
@import "bootstrap/less/bootstrap.less";

 .BWButton {
  .btn;


 }

当我只导入“bootstrap/less/bootstrap.less”时，这有点奇怪，一切都会被覆盖，我在母版页中导入的 css/less 的顺序和时间都没有关系我只使用 "@import "bootstrap/less/buttons.less"" 即使我删除母版页中的所有 css/less 导入，页面上也没有效果......但是智能感知适用于两个导入（“bootstrap/ less/buttons.less”和“bootstrap/less/bootstrap.less”）（在site.less中导入时），但在客户端站点Site.less上（当我在之前导入“bootstrap/less/buttons.less”时） site.less ）是空的（当我在 fire bug 中选择“Site.less”时）..

我的 master.page(Shared/_Layout.cshtml) 在标题中看起来像这样：

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

客户端的输出：

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

也许这对你有更多帮助:)

【问题讨论】：

您可以在您自己的类之前导入 Bootstrap 文件（这样您的类将覆盖 BS 类）。此外，您的要求似乎有些矛盾：“但我需要所有课程”和“但不是所有内容”（如果您不想要引导程序的 input, textarea 东西等，请不要导入相应的 forms.less 等）。
感谢您的支持。我的目标是为每个项目（我在 Site.less 中声明）拥有相同的类名，而不是从引导程序继承（使用 mixin）并使用我自己的类......希望这会有所帮助（我也更新了我的帖子）
见lesscss.org/features/#import-options-reference
谢谢。但是当我想添加“@import（参考）“bootstrap/less/bootstrap.less”；” vs2013 告诉我“期望媒体查询或分号”-这里有什么问题？
只是 dotless 提供了相当过时的 Less 实现。

标签： css twitter-bootstrap-3 visual-studio-2013 less

【解决方案1】：

在你的 html 中，确保最后包含你自己的样式表！

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

在上面的示例中，我的自定义样式表将覆盖 bootstrap.min.css 表。

【讨论】：

很好的答案，这对我有帮助