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://mcmap.net/q/1549281/-can-39-t-get-dotless-import-working:

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.

Bagwig

Is the syntax of your @import statement correct? I don't recognize the (less) particle, and I've only ever seen it used with double quotes... From the Less.js site the syntax is given as @import "@{themes}/tidal-wave.less"; – Fiberglass

Also, is your path correct? Are you sure that /css is in the root of your filesystem? – Fiberglass

I'll check the quotes, ta! What do you mean by "root of filesystem" - /css is the virtual root of the website - is that correct? – Bagwig

Changed the quotes and lost the (less), still no joy :( – Bagwig

Just a guess: notice your main file is actually a CSS file (main.css) and strictly speaking it should not process any Less imports or variables. Technically you should get error right at @import (less) or at least at @button_bg (both are invalid in a CSS file). In other words it may be just some quirk in your setup (dotless must not process *.css files at all). – Saltsman

Answer 1

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

Keepsake

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.

Verdaverdant

I'll give it a go in case of quirks, but the dotless handler is mapped to .css files as well as .less. The CSS files are definitely being parsed as LESS because variables work in them if they are not being imported; it's only imports that don't work - also did you see my EDIT 2 about it working once? – Bagwig

@Bagwig the dotless handler is mapped to .css files as well as .less And this is what we suggest as the root of the problem. I.e. dotless processes (tries to) your css as less file, but due to some internal quirks/bugs it just can't do everything (e.g. imports) as expected that way. The fact that variables or any other features (even if it's 99 of 100) work that way does not mean anything. – Saltsman

"it's only imports that don't work" This is because, you are trying to import a less file into a css file. I do not think thats possible. I dont think dotless parser can parse it like that. Instead of calling your main.css file. Just rename it to main.less. The same code when called from main.less file should work correctly. – Verdaverdant

Right, makes sense. I will be back at that project this afternoon and will give it a go. – Bagwig

I'm afraid that doesn't change anything. Again, it works when I first navigate to the page, but then all subsequent refreshes fail. It's got to be something that IIS is doing, caching, compression - no idea what, I've disabled all caching and compression options I can find with no joy :( – Bagwig

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.

Skylark

I'm not pre-compiling; I'm using the handler on the fly. It is an intranet app under constant development, so the convenience of the handler far outweighs any speed advantages of pre-compiling. – Bagwig