Question

Web Essentials和Bootstrap混音是否存在已知问题？我得到的CSS不正确（可重复 - 请参阅下面的代码）。

我正在使用bootstrap.less包并使用Web Essentials将较少的文件编译为css。（VS 2013 + Update 1 / Latest web essentials）

所以，如果我创建一个这样的简单页面，一切正常：也就是说，2个div水平堆叠，直到我的浏览器窗口变得太小，然后它们垂直堆叠。

<div class="container">
  <!-- this row uses no LESS-->
  <div class="row">
    <div class="col-sm-12 col-md-6">
      <span>Div1</span>
    </div>
    <div class="col-sm-12 col-md-6">
      <span>Div2</span>
    </div>
  </div>
</div>

现在，如果我创建了一小块LESS

@import (reference) 'bootstrap/bootstrap.less';

.div-container {
    .make-md-column(6);
    .make-sm-column(12);
}

然后改变我的代码：

<div class="container">
    <!-- this row uses the bootstap LESS mixin (css compiled with Web Essentials)-->
    <div class="row">
        <div class="div-container">
            <span>Div1</span>
        </div>
        <div class="div-container">
            <span>Div2</span>
        </div>
    </div>
</div>

它停止工作 - 特别是，divs垂直堆叠，即使在中等或大的宽度上。

现在，我认为我输入的LESS完全等同于我在第一个片段中使用的裸课。

我认为问题在于WebEssentials / Visual Studio没有正确编译LESS。

我认为这是问题所在，因为如果我查看生成的css，其中没有媒体查询，但bootstrap mixin文件（mixins.less具体）指定了hte .make-xx的媒体查询-col mixins。

我可能不是第一个打这个的人，所以我一定是做错了。有解决方法吗？我错误配置了什么吗？是否有其他一些LESS编译解决方案我应该使用而不是Web Essentials？

Answer 1

对mixins重新排序，以便编译的css输出不会覆盖具有较大最小宽度的选择器。

减：

.div-container {
    .make-sm-column(12);
    .make-md-column(6);
}

CSS：

.div-container {
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
}
@media (min-width: 768px) {
  .div-container {
    float: left;
    width: 100%;
  }
}
@media (min-width: 992px) {
  .div-container {
    float: left;
    width: 50%;
  }
}

Answer 2

@import (reference) 'bootstrap/bootstrap.less';

.div-container {
    .make-md-column(6);
    .make-sm-column(12);
}

我认为这是一个简单的文件导入问题。尝试使用

 @import  '../../../bootstrap/bootstrap.less';

或使用'../../../'修改您的代码.. 这是一个无能为力的事情......

注意： -

如果您正在使用Web Essential ..那么您应该导入这样的文件。否则.Less到.CSS转换将无效..

@import "../../../content/bootstrap/variables.less";
@import "../../../content/bootstrap/mixins.less";
@import "../../../content/bootstrap/utilities.less";

Bootstrap混合和Web Essentials问题

2 个答案: