无法编译Jasny Bootstrap的LESS文件

Question

## Question asked by CodeCowboy:

我已经包含了一些第三方较少的文件，这些文件依赖于某些引导变量，但在运行grunt dev时出现以下错误：

NameError: variable @container-lg is undefined in assets/vendor/jasny-bootstrap/less/variables.less on line 11, column 28:
>> 10 
>> 11 @container-smooth:         @container-lg;
>> 12
Warning: Error compiling assets/vendor/jasny-bootstrap/less/jasny-bootstrap.less Use --force to continue.
I think roots is including bootstrap's variable file first which contains:

@container-large-desktop:      (1140px + @grid-gutter-width);
//** For `@screen-lg-min` and up.
@container-lg:                @container-large-desktop;

所以我不确定为什么grunt dev失败并且没有看到这个变量？我意识到这不是一个严格的根本问题，但希望有人可以提供帮助，这可能是root用户使用bootstrap特有的。

gruntfile.js的相关部分

less: {
  dev: {
    files: {
      'assets/css/main.css': [
        'assets/less/main.less',
        'assets/vendor/jasny-bootstrap/less/jasny-bootstrap.less'
      ]
    },

Answer 1

与Bootstrap结合

最好你应该在包含Twitter Bootstrap的less文件中加载Jasny Bootstrap。所以main.less应该看起来像

@include 'assets/vendor/bootstrap/less/bootstrap.less';
@include 'assets/vendor/jasny-bootstrap/less/jasny-bootstrap.less';

// Your own CSS rules 
...

独立

或者，您可以将Jasny Bootstrap构建为独立的。在这种情况下，使用less/build/jasny-bootstrap.less。将咕噜声设置更改为

less: {
  dev: {
    files: {
      'assets/css/main.css': [
        'assets/less/main.less',
        'assets/vendor/jasny-bootstrap/less/build/jasny-bootstrap.less'
      ]
    },