Skip to content


Wish: @import process .CSS file as LESS file #303

grobakh opened this Issue · 11 comments

9 participants


You wrote:
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.
I want LESS to process my .css with @import command. Reason: not to reconfigure MIME types by adding .less.
Today I need to comment test: // this.css = /css$/.test(this.path);

Maybe invent some special syntax
@import! "lib.css"
@import "lib.css" --less --once
@import "lib.css" -lo
to force .css processing?

Vlad D.


I'm not sure what you mean by "process my css". Either it's css and doesn't need processing, or it's a less file and does need processing.

However, perhaps you are getting at what I would like -- I would like to be able to include a css file inside a less file. This is useful for bundling the css into one file. Right now you need to rename the css file to .less so that the @import command will bundle them together. You end up losing meaning, if that file does not have any less commands in it.

I started working on an @include command that would simply add the css file 'as is' to the output. Perhaps that would work?

@include "reset.css"
@import "base"


I've done this, see #315
you just have to rename your '.css' file '.less.css'



Vlad D.

@grobakh grobakh closed this

Is there any way to inline css imports? It's not processing per se but rather concatenating.


Not sure exactly what this would buy you, are you looking to include the variables you created in the imported file?

either way this sounds like a fresh support request, this one only deals with including more file types with the @import rule


I have the same need. And not only me: I want to use some jquery ui styles in my less files. It's obvious that I can't rename jquery-ui.css because jquery ui gets broken than. And such thing doesn't work:

@import "jquery-ui/css/start/jquery-ui.css";
.my-style {
    .ui-icon; /*less doesn't know ui-icon*/

I believe that isn't hard to implement.


@yaroslav-ulanovych: This sounds like a whole new feature (actually importing symbols from css)
vs concatenating css into a less file (which is what happens now)

This issue was merely a request to treat '.less.css' files exactly like '.less' files.

you could probably treat '.css' files like '.less' files to get this effect since less is a superset of css.

you could do this in your copy of the code by tweaking this line jamie-pate@c37bf80 in a slightly different way


Here is how I worked around it:

# This script renames renames all .css files under components to .less
# This is to work around less' inability to @include a .css file.
for file in `find components -type f -name "*.css"` ; do
  mv ${file} ${file%.css}.less

Less.js can import css files as of version 1.4.0:

@import (less) "styles.css";
Less member

Correct. This feature has been implemented. We can re-open issue if it's not working correctly with the beta.

@matthew-dean matthew-dean reopened this

+1 !

@javisantana javisantana pushed a commit to CartoDB/carto that referenced this issue
@springmeyer springmeyer fix #303 cfab4f6
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.