metaskills/less-rails-bootstrap

Less::ParseError variable is undefined when in admin section

james-ai opened this issue · 5 comments

james-ai commented

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 commented

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

james-ai commented

Will do.

james-ai commented

@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 commented

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

Thanks,
James.

USvER commented

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.