Less::ParseError variable is undefined when in admin section

[james-ai]

I get the following error when loading a page in the admin area of the application I'm writing.

Less::ParseError at /admin
variable @gray-lightest is undefined in /Users/jamessmith/rails_app/app/assets/stylesheets/admin/sidebar.css.less

@gray-lightest is defined in app/assets/stylesheets/custom_bootstrap/variables.less.

I'm using a different manifest file for the admin area so in that page I have:

<%= stylesheet_link_tag "admin/manifest", media: "all", "data-turbolinks-track" => true %>

In app/assets/stylesheets/admin/manifest.css I have:

 *= require custom_bootstrap/custom_bootstrap
 *= require bootstrap-datetimepicker
 *= require font-awesome
 *= require froala_editor.min
 *= require froala_style.min
 *= require jquery-ui/autocomplete
 *= require admin/articles
 *= require admin/panel
 *= require admin/sidebar

And in sidebar.css.less:

.sidebar {
  .sidebar-nav.navbar-collapse {
    padding-left: 0;
    padding-right: 0;
  }
}

.sidebar .sidebar-search {
    padding: 15px;
}

.sidebar ul li {
  border-bottom: 1px solid darken(@gray-lightest, 6.5%);
  a {
    &.active {
      background-color: @gray-lighter;
    }
  }
}

.sidebar .arrow {
  float: right;
}

.sidebar .fa.arrow:before {
  content: "\f104";
}

.sidebar .active > a > .fa.arrow:before {
  content: "\f107";
}

.sidebar .nav-second-level li,
.sidebar .nav-third-level li {
  border-bottom: none !important;
}

.sidebar .nav-second-level li a {
  padding-left: 37px;
}

.sidebar .nav-third-level li a {
  padding-left: 52px;
}

@media(min-width:768px) {
  .sidebar {
    z-index: 1;
    position: absolute;
    //width: 250px;
    //margin-top: 51px;
  }

  .navbar-top-links .dropdown-messages,
  .navbar-top-links .dropdown-tasks,
  .navbar-top-links .dropdown-alerts {
    margin-left: auto;
  }
}

If I define @gray-lightest in sidebar.css.less then the file complains about @gray-lighter being undefined. If I then define @gray-lighter too then the pages in the admin area load fine.

Here are my env details:

Ruby: 2.1.2
Rails: 4.2.0
less-rails: 2.7.1
less-rails-bootstrap: 3.3.5.0

[simi]

Can you prepare some minimal app to reproduce? That will speed up debug process for me.

[james-ai]

Will do.

[james-ai]

@simi Project here https://github.com/james-ai/test_project

It has a single test. Oddly enough even declaring @gray-lighter in sidebar.css.less still causes the test to fail. That is the only variable used that I believe is already set by Bootstrap.

[james-ai]

Hi @simi, wondered if you had a chance to look at this?

Thanks, James.

[USvER]

Having the same issue. The problem is if you want to use bootstrap variables you need to import bootsrap.less but how to do that? @import 'custom_bootstrap/custom_bootstrap' does not work.