7

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.

Whelkaholism
  • 1,551
  • 3
  • 18
  • 28
  • 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](http://lesscss.org/features/) the syntax is given as `@import "@{themes}/tidal-wave.less";` – DavidW Jun 18 '18 at 17:12
  • Also, is your path correct? Are you sure that `/css` is in the root of your filesystem? – DavidW Jun 18 '18 at 17:14
  • 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? – Whelkaholism Jun 19 '18 at 09:34
  • Changed the quotes and lost the `(less)`, still no joy :( – Whelkaholism Jun 19 '18 at 09:50
  • 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*). – seven-phases-max Jun 20 '18 at 07:33

3 Answers3

2

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

Toni Wenzel
  • 2,081
  • 2
  • 24
  • 39
1

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.

Priyesh Diukar
  • 2,032
  • 1
  • 15
  • 19
  • 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? – Whelkaholism Jun 20 '18 at 11:19
  • @Whelkaholism *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. – seven-phases-max Jun 20 '18 at 13:50
  • "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. – Priyesh Diukar Jun 20 '18 at 15:26
  • Right, makes sense. I will be back at that project this afternoon and will give it a go. – Whelkaholism Jun 21 '18 at 10:06
  • 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 :( – Whelkaholism Jun 26 '18 at 09:58
0

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

Hooman Bahreini
  • 14,480
  • 11
  • 70
  • 137
  • 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. – Whelkaholism Jun 26 '18 at 10:00