import .css file into .less file

Question

Can you import .css files into .less files...?

I'm pretty familiar with less and use it for all my development. I regularly use a structure as follows:

@import "normalize";

//styles here

@import "mixins";
@import "media-queries";
@import "print";

All imports are other .less files and all works as it should.

My current issue is this: I want to import a .css file into .less that references styles used in the .css file as follows:

@import "../style.css";

.small {
    font-size:60%;
    .type;
}
// other styles here

The .css file contains a class called .type but when I try to compile the .less file I get the error NameError: .type is undefined

Will the .less file not import .css files, only other .less ones...? Or am I referencing it wrong...?!

Answer 1

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.

Answer 2

If you want your CSS to be copied into the output without being processed, you can use the (inline) directive. e.g.,

@import (inline) '../timepicker/jquery.ui.timepicker.css';

Answer 3

I had to use the following with version 1.7.4

@import (less) "foo.css"

I know the accepted answer is @import (css) "foo.css" but it didn't work. If you want to reuse your css class in your new less file, you need to use (less) and not (css).

Check the documentation.

Answer 4

Change the file extension of your css file to .less. You don't need to write any LESS in it; all CSS is valid LESS (except of the MS stuff that you have to escape, but that's another issue.)

Per Fractalf's answer this is fixed in v1.4.0

Answer 5

From the LESS website:

If you want to import a CSS file, and don’t want LESS to process it, just use the .css extension:

@import "lib.css"; The directive will just be left as is, and end up in the CSS output.

As jitbit points out in the comments below, this is really only useful for development purposes, as you wouldn't want to have unnecessary @imports consuming precious bandwidth.

Answer 6

Try this :

@import "lib.css";

From the Official Documentation :

You can import both css and less files. Only less files import statements are processed, css file import statements are kept as they are. If you want to import a CSS file, and don’t want LESS to process it, just use the .css extension:

---

Source : http://lesscss.org/

Answer 7

If you just want to import a CSS-File as a Reference (e.g. to use the classes in Mixins) but not include the whole CSS file in the result you can use @import (less,reference) "reference.css";:

my.less

 @import (less,reference) "reference.css";
 .my-class{
     background-color:black;
     .reference-class;
     color:blue;
 }

reference.css

.reference-class{
    border: 1px solid red;
}

*Result (my.css) with lessc my.less out/my.css *

.my-class {
  background-color: black;
  border: 1px solid red;
  color: blue;
}

I'm using lessc 2.5.3

Answer 8

If you want to import a css file that should be treaded as less use this line:

.ie {
  @import (less) 'ie.css';
}

Answer 9

since 1.5.0 u can use the 'inline' keyword.

Example: @import (inline) "not-less-compatible.css";

You will use this when a CSS file may not be Less compatible; this is because although Less supports most known standards CSS, it does not support comments in some places and does not support all known CSS hacks without modifying the CSS. So you can use this to include the file in the output so that all CSS will be in one file.

(source: http://lesscss.org/features/#import-directives-feature)