Question

我正在尝试在bootstrap 3上玩。我想创建一个自定义的少文件（比如custom_img.less）并将其导入bootstrap.less。但是，当我尝试将less编译为css时，我得到了错误ParseError：在xxxx中的UNrecognize输入。请参阅下面的代码。

custom_img.less

.img-custom {
  @media (min-width: @grid-float-breakpoint) {
    width: 50%*@grid-float-breakpoint;
    height: 50%@grid-float-breakpoint;
  }
}

在bootstrap.less中导入

@import "wells.less";
@import "close.less";
@import "custom_img.less";

错误是这个 - ParseError：XXXXX中无法识别的输入

.img-custom {

有什么不对/丢失？我需要导入一些东西吗？

提前谢谢。

Answer 1

在你的帖子中你没有提到导入变量。无法在bootstrap.less中定义@ grid-float-breakpoint

.img-custom {
  @media (min-width: @grid-float-breakpoint) {
    width: 0.5*@grid-float-breakpoint;
    height: 0.5*@grid-float-breakpoint;
  }
}

编译成：

 @media (min-width: 768px) {
      .img-custom {
        width: 384px;
        height: 384px;
      }
    }

注意50%*@grid-float-breakpoint;提供38400％和50%@grid-float-breakpoint;汇编到50% 768px

<强>更新

为什么其他bootstrap组件不必导入variable.less？像nav.less

我不认为它是真的，nav.less不必导入变量。如果未定义变量或mixins，则LESS会抛出错误并停止编译。 nav.less还包含@border-radius-base之类的变量。 Bootstrap的LESS文件打算编译为lessc bootstrap.less bootstrap.less导入所需文件s.a. variables.less和mixins.less。当然你可以在bootstrap.less中注释掉一些组件。另请参阅：Bootstrap & LESS: importing mixins only as reference

ParseError：创建自定义较少文件时，无法识别输入

1 个答案: