Import .CSS File into .Less File

import .css file into .less file

You can force a file to be interpreted as a particular type by specifying an option, e.g.:

@import (css) "lib";

will output

@import "lib";

and

@import (less) "lib.css";

will import the lib.css file and treat it as less. If you specify a file is less and do not include an extension, none will be added.

Import css file as a block-level import using less

(inline) just injects the imported file "as-is" w/o parsing it, so the result of such import inside a ruleset is undefined (invalid CSS like in your example).
To get what you need use (less) option, e.g.:

.scope {
    @import (less) "z.css";
}

Import LESS file only for one page

On your homepage use:

<body class="homepage">

And then in your Less files:

.homepage {
  @import "homepage.less";
}

The above still compiles all your code in a single file. Your compiled CSS code will have a larger number of bytes, but you can cache the same file for all your pages.

Why can't I import .less files into a single .less file?

I just tried this on my local environment, putting vars into vars.less and mixins into conf.less. The file structure similar to yours, with the base .less file a level below the folder containing all the 'includes'.

So I had css folder which had my main.less file and then css/less/vars.less | conf.less

To import both of those:

@import "less/vars.less";
@import "less/conf.less";

My only answer is to remove the first / in your @import statement. I had similar problems when trying to import a google font into my .less file.

Worth a shot at least, because using the same structure as yours mine is working.

Import .css file in Less using nodejs gulp

There are several ways to include files in LESS, depending on what you need, using @import ([keyword]) "filename".

Allowed keywords are:

reference: use a Less file but do not output it

inline: include the source file in the output but do not process it

less: treat the file as a Less file, no matter what the file extension

css: treat the file as a CSS file, no matter what the file extension

once: only include the file once (this is default behavior)

multiple: include the file multiple times

optional: continue compiling when file is not found

Lesscss.org - Import Options

It's not clear to me what your use case is, but if you want to use the contents of spritesheet.css further on in your LESS file (for example extending classes defined in your spritesheet) you need the (less) keyword.

If you just want to include the contents of spritesheet.css into your output file without accessing them from within the LESS file at all, stick with (inline).

Import .CSS File into .Less File