import .css file into .less file

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...?!

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.

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';

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.