Skip to content
This repository

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

Closed
grobakh opened this Issue July 02, 2011 · 11 comments
vladimirdupelev

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?

BR
Vlad D.

Wayne Larsen
wvl commented July 09, 2011

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"

jamie-pate

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

vladimirdupelev

Cool!

BR
Vlad D.

vladimirdupelev grobakh closed this July 13, 2011
tonyxiao

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

jamie-pate

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

Yaroslav Ulanovych

I have the same need. And not only me: http://stackoverflow.com/questions/11196915/import-css-file-into-less-file. 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.

jamie-pate

@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

Aslak Hellesøy

Here is how I worked around it:

#!/bin/bash
#
# 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
done
Jon Schlinkert
Owner

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

@import (less) "styles.css";
Matthew Dean
Collaborator

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 May 25, 2013
Matthew Dean matthew-dean closed this May 25, 2013
Gaurav Ramanan

+1 !

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.