Search code examples
css.netiislessdotless

Can't get dotLESS @import working

I'm struggling with the dotLESS @import to have a separate variables file; I just constantly get "variable is undefined".

If I browse to the variable config file it works; if I put the variables inline in the main stylesheet it works; but in an @import, no dice. I'm mapping .css as well as .less to the extension, however it also doesn't work if I use .less only.

The variables file LESS-config.less is:

/*
  .LESS VARIABLES
*/
@mbw_dark_cyan: #1293b5;
@mbw_cyan: #11add4;
@mbw_magenta: #e935da;

@control_text: #ffffff;

@action_delete: #ff5400;

@section_level1_bg: @mbw_dark_cyan;
@section_level1_fg: @control_text;

@button_bg: @mbw_dark_cyan;
@button_fg: @control_text;
@button_icon: @control_text;

@data_table_header: @mbw_cyan;

.dummy {
    color: @control_text;
}

Which renders as:

/*
  .LESS VARIABLES
*/
.dummy {
  color: #ffffff;
}

Calling stylesheet main.css is: 

@import (less) '/css/LESS-config';

button {
    background: @button_bg;
}

Which gives the error: 

variable @button_bg is undefined on line 4 in file '/css/main.css':
  [3]: button {
  [4]:     background: @button_bg;
       ----------------^
  [5]: }

As I said, if I replace the import with the same variables copied and pasted, it all works fine.

I've tried saving without BOM as in another answer, but that doesn't help.

EDIT, I've tried:

  • Removing the (less)
  • Changing to double quotes
  • Using relative path LESS-config as opposed to virtual absolute as above
  • Adding logger="dotless.Core.Loggers.AspResponseLogger" log="debug" to web.config (cache is already false)
  • Adding debug="1"
  • Adding debug="true"

Absolutely no change in behaviour.

EDIT 2:

I created a cut-down css that only had the import statement in it; when I browse to it the imported styles are in there. However, on a refresh, I just get a blank response.

So it seems to be something to do with my IIS config / caching? I've turned off content compression but no joy; disabled all output caching for .less and .css, still no joy!

FIXED as per Toni's comment; https://stackoverflow.com/a/51754771/318411:

This turned out to be a dotLESS issue, tracked on GitHub here: https://github.com/dotless/dotless/issues/553

The complete fix was to:

  1. Upgrade dotLESS to version 1.6.7
  2. Downgrade Microsoft.Extensions.DependencyInjection to 1.1.1.0 due to Method not found error
  3. Change the file extension of the import from .css to .less

Now all working.

Solution

  • Please try version 1.6.7 which fixes an error that imports are only executed on the very first request.