Can't get dotLESS @import working

Question

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.

Answer 1

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

Answer 2

I potentially see two problems that you have.

1. You are trying to call @import (less) in a css file. This is a syntax specific to less framework.
2. Your main.css is not a less file.

Change your main.css to a main.less file and now try generating your css from main.less as your root file. Assuming your import url for LESS-config.less is correct. The above mentioned corrections should probably do the trick.

Answer 3

@import (less, optional) "mystyle.css"; is Less syntax, you cannot use it in CSS (Less @import Rules).

If you want to use @import in your CSS, it should follow this syntax (See here)

@import url|string list-of-mediaqueries;

But, you cannot import a Less file inside your CSS anyways.

---

The way I would have done this:

Say you have 3 .less files: config.less, color.less, header.less

I would create a style.less file with the following content:

/*------------------------------------------------------------------------------*/
                                   style.less
/*------------------------------------------------------------------------------*/

/* 01. config */
@import "config.less";

/* 02. color */
@import "color.less";

/* 03. header */
@import "header.less";

Then I would complie style.less which would produce, style.css and I would include style.css in my website.