如何在 {less} 中扩展 Bootstrap 类？

Question

对于新手问题，我显然是新手。我正在尝试制作一个可以在整个网站中使用但使用 Bootstrap 的通用 CSS。例如，我想使用 Bootstrap 的面板类。目前我们在几个地方使用“.panel-primary”类。但是，如果我们决定要使用不同的颜色，例如“.panel-default”，我不想访问我所有可能有几个面板的页面来进行更改。相反，我希望创建一个通用的 CSS 类来继承 Bootstrap 类，这样我就只有一个位置来进行更改。

有人建议我考虑为此使用 less 或 SAAS，从我所见的基础知识来看，我认为我只需要 less。

我正在使用 ASP.Net MVC 项目，所以我使用 NuGet 安装“无点”。然后我将我的 css 文件更改为 site.less，它看起来好像可以正常工作。现在我正在尝试使用扩展来做我想做的事，但我显然错过了一些东西，因为 CSS 没有应用 Bootstrap 类。

这是我最初使用的 Bootstrap 类。

<div class="panel panel-primary">
    <div class="panel-heading">
        <h3 class="panel-title">
            Available Stations
        </h3>
    </div>
    <div class="panel-body">
        <div class="col-md-9">
            @Html.DropDownList("City", Model.CityList, new { @class = "form-control" })
        </div>
        @Html.Raw("&nbsp;")
        <input type=submit name=submit value="Set Station" class="btn btn-info">
    </div>
</div>

这是我尝试使用 less 并将其应用到我的页面。

.vtc-panel{
    &:extend(.panel);
    &:extend(.panel-primary);
}

<div class="vtc-panel">
    <div class="panel-heading">
        <h3 class="panel-title">
            Available Stations
        </h3>
    </div>
    <div class="panel-body">
        <div class="col-md-9">
            @Html.DropDownList("City", Model.CityList, new { @class = "form-control" })
        </div>
        @Html.Raw("&nbsp;")
        <input type=submit name=submit value="Set Station" class="btn btn-info">
    </div>
</div>

更新

这是我尝试过的其他一些方法，但仍然无法正常工作。

首先我想也许它没有看到 Bootstrap 文件，所以我在我的 less 文件的顶部做了一个 @import。这似乎可以包含 Bootstrap，但我随后尝试对 css 类进行以下更改，但它仍然没有应用 Bootstrap 样式。

@import (inline) '../Content/bootstrap.min.css';

.vtc-panel:extend(.panel, .panel-primary){

}

Answer 1

所以经过更多的挖掘之后，我终于得到了这个工作。我正在传递它，希望它可以帮助其他人。这假设您有 LESS 安装和设置。

需要做的第一件事是将您的 Bootstrap 文件更改为 less。将 bootstrap.min.css 重命名为 bootstrap.min.less。这使引导程序通过 LESS 编译引擎。

然后在您的主 LESS 文件中导入引导文件。我把它放在我的 site.less 文件的顶部。

@import (inline) '../Content/bootstrap.less';

然后在我的 site.less 文件中，我添加了一个名为“vtc-panel”的类，并从引导程序继承了“panel”类。

.vtc-panel{
    .panel;
    .panel-primary;
}

Answer 2

确保您已将 Bootstrap 文件包含为 LESS 文件，而不是 CSS 文件。